I previously implemented a method for responsive images on my website, which was working fine until the latest Chrome update. Surprisingly, it still functions properly on other browsers.
//< ![CDATA[
var queries = [
{context: 'global',
callback: function() {
$('img').each(function(index) {
var small = $(this).attr('src');
$(this).attr('src',small);
});
}
},
{context: 'sizeSmll',
callback: function() {
$('img').each(function(index) {
var smll = $(this).data('smll');
$(this).attr('src', smll);
});
}
},
//more size callbacks...
];
MQ.init(queries);
//]]>
Here is the corresponding CSS:
body:after {
content: 'global';
display: none;
}
@media only screen and (max-width: 480px) {
body:after {
content: 'sizeSmll';
display:none;
}
}
More media queries are set up using the same approach.
The HTML image code looks like this:
<img class="responsiveImg" src="urlImage0.png"
data-smll="urlImage1.png"
data-medium="urlImage2.png"
data-large="urlImage3.png"
data-extralarge="urlImage4.png">
Additionally, I am utilizing an onmediaquery.min.js file with the following source:
var MQ = function(b) {
b = b || {};
//... full JavaScript code here ...
return b;
}(MQ || {});
This concept was inspired by:
If anyone has insights into the recent changes in Chrome that might be affecting this setup, please share. Thank you in advance!