在Chrome上使用「內容」的自適應圖像版本33.0.1750.117

我在我的網站中使用了響應式圖像的源代碼，但它在las chrome更新後停止工作，但仍在其他瀏覽器中工作。在Chrome上使用「內容」的自適應圖像版本33.0.1750.117

//<![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);});}},{context: 'size0',callback: function() { 
       $('img').each(function(index) {var medium = $(this).data('medium'); 
       $(this).attr('src',medium);});}},{context: 'size1',callback: function() { 
        $('img').each(function(index) {var large = $(this).data('large'); 
        $(this).attr('src',large);});}},{context: 'size2',callback: function() { 
         $('img').each(function(index) {var extralarge = $(this).data('extralarge'); 
         $(this).attr('src', extralarge); 
     });}}];MQ.init(queries); 
//]]>

的CSS：

body:after {content: 'global';display: none;} 

@media only screen and (max-width: 480px) { 
body:after {content: 'sizeSmll'; display:none;}

}

...多的媒體querys具有相同的源。

和HTML圖像：

<img class="responsiveImg" src="urlImage0.png" 
data-smll="urlImage1.png" 
data-medium="urlImage2.png" 
data-large="urlImage3.png" 
data-extralarge="urlImage4.png">

它的使用也onmediaquery.min.js文件，與後續的源：

var MQ=function(b){b=b||{};b.init=function(a){this.callbacks=[];this.context="";if("undefined"!==typeof a)for(i=0;i<a.length;i++)this.addQuery(a[i]);this.addEvent(window,"resize",b.listenForChange,b);this.listenForChange()};b.listenForChange=function(){var a;window.getComputedStyle&&(a=window.getComputedStyle(document.body,":after").getPropertyValue("content"),null!=a&&(a=a.replace(/['"]/g,""),a!==this.context&&this.triggerCallbacks(a),this.context=a))};b.addQuery=function(a){if(!(null==a||void 0== a))return this.callbacks.push(a),this.callbacks[this.callbacks.length-1]};b.removeQuery=function(a){if(!(null==a||void 0==a))for(var c=-1;-1<(c=this.callbacks.indexOf(a));)this.callbacks.splice(c,1)};b.triggerCallbacks=function(a){var c,b;for(c=0;c<this.callbacks.length;c++)b=this.callbacks[c].callback,this.callbacks[c].context===a&&void 0!==b&&b()};b.addEvent=function(a,b,d,e){null==a||void 0==a||(a.addEventListener?a.addEventListener(b,function(){d.call(e)},!1):a.attachEvent?a.attachEvent("on"+ b,function(){d.call(e)}):a["on"+b]=function(){d.call(e)})};return b}(MQ||{});

的想法來源於此：

http://www.springload.co.nz/love-the-web/responsive-javascript

有人知道在新的Chrome上發生了什麼變化，可能是af感覺我的來源？先謝謝了！

來源

2014-03-03 user3080928