MQ-based Content-controlled Optional Image Loading

Developer
Aaron Gustafson
Size
3,047 Kb
Views
38,456
  1. MQ-based Content-controlled Optional Image Loading Previews
  2. MQ-based Content-controlled Optional Image Loading HTML Codes
  3. MQ-based Content-controlled Optional Image Loading CSS Codes

How do I make an mq-based content-controlled optional image loading?

This is a test. I want to see if we can reliably load images only within specific media queries using only HTML and CSS without causing issues in older browsers.. What is a mq-based content-controlled optional image loading? How do you make a mq-based content-controlled optional image loading? This script and codes were developed by Aaron Gustafson on 13 August 2022, Saturday.

MQ-based Content-controlled Optional Image Loading Previews
IQ Test

MQ-based Content-controlled Optional Image Loading - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>MQ-based Content-controlled Optional Image Loading</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>MQ-based Content-controlled Optional Image Loading</h1>
<p>This is a test. I want to see if we can reliably load images only within specific media queries using only HTML and CSS without causing issues in older browsers.</p>
<p>On modern browsers rendering with a screen width of 20em or above, an image should be displayed in the box below. On older browsers or browsers displaying below 20em, you should <strong>not</strong> see an image, a broken image icon, or (optionally) displayed <code>alt</code> text (typically displayed because the <code>src</code> is not available).</p>
<p>Drumroll…</p>
<div class="image-container">
<img sizes="(min-width: 40em) 80vw, (min-width: 20em) 100vw" srcset="http://scottjehl.github.io/picturefill/examples/images/medium.jpg 375w, http://scottjehl.github.io/picturefill/examples/images/medium.jpg 480w, http://scottjehl.github.io/picturefill/examples/images/large.jpg 768w" alt="This alt text could be optionally displayed.">
</div>
<small>Image and basic <code>img</code> syntax lifted from <a href="http://scottjehl.github.io/picturefill/">the Picturefill documentation</a></small> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

MQ-based Content-controlled Optional Image Loading - Script Codes CSS Codes

@charset "UTF-8";
/* Hide all images */
img { position: absolute; overflow: hidden; width: 0; height: 0;
}
/* Show traditional images */
img[src] { position: static; width: auto; height: auto;
}
/* Optional: In modern browsers, hide alt text for non-src’d images */
img[alt]:not([src]):before,
img[alt]:not([src]):after { position: absolute; overflow: hidden; width: 0; height: 0;
}
/* Images should only appear > 20em on modern browsers */
@media only screen and (min-width: 20em) { /* Bring images back universally */ img { position: static; width: auto; height: auto; } /* Debugging something in IE9+ */ img:not([src]) { position: absolute; overflow: hidden; width: 0; height: 0; } img[srcset]:not([src]) { position: static; width: auto; height: auto; }
}
/* Demo styles - irrelevant to the concept */
body { padding: 0 1em;
}
small { display: block; font-style: italic; margin: 1em 0;
}
.image-container { border: 1px solid; background: #ccc; padding: 1em;
}
MQ-based Content-controlled Optional Image Loading - Script Codes
MQ-based Content-controlled Optional Image Loading - Script Codes
Home Page Home
Developer Aaron Gustafson
Username aarongustafson
Uploaded August 13, 2022
Rating 3
Size 3,047 Kb
Views 38,456
Do you need developer help for MQ-based Content-controlled Optional Image Loading?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aaron Gustafson (aarongustafson) Script Codes
Name
Visualizing CSS Transforms
Zoom Layouts v2
Validation rules jQuery plugin
FAQ JS-Enhanced Tab Order
Un-doing tables
Simple pull quote
Easy Obfuscated Field
Easy Couch Mode
Form Patterns
Pure CSS knockout arrow
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!