響應圖片更換添加了IMG通過CSS或jQuery的屬性

Question

鑑於這種HTML標記...

<figure class="figureFeatured"> 
    <img 
     width="300" 
     height="213" 
     src="wp-content/uploads/featuredImage-300x213.jpg" 
     data-responsive="wp-content/uploads/featuredImage-150x150.jpg" 
    /> 
</figure> 

是否有可能取代數據響應屬性的值src屬性？

我只希望做在特定於設備的寬度斷點更換（CSS媒體查詢或jQuery的窗口調整尺寸）

Answer 1

你可以做這樣的事情：

更改標記到這個

<figure class="figureFeatured"> 
    <img class="yourImgClass" src="wp-content/uploads/featuredImage-150x150.jpg" data-responsive="wp-content/uploads/featuredImage-300x213.jpg"/> 

這將首先包含移動圖像，並與Responsive的最佳實踐一致。確保您的圖像設置爲最大寬度：您的css中的圖像的最大寬度爲100％

明智的JavaScript，此代碼將爲您提供視口寬度，然後在調整窗口大小時交換圖像 - （將breakPoint變量更改爲適合你的需要）

/*! viewportwidth.js 0.1.1 | Author: Brett Jankord, 2012 | License: MIT */ 
    /* https://github.com/bjankord/viewportwidth.js */ 

    function getViewportWidth() { 
     var vpw, w = window, 
      webkit = (!(window.webkitConvertPointFromNodeToPage == null)); 

     // Webkit and IE 6-8 
     if (webkit || !(typeof (window.innerWidth) == 'number')) { 
      vpw = document.documentElement.clientWidth; 
     } 
     // Everything else 
     else { 
      vpw = w.innerWidth; 
     } 
     return vpw; 

    }; 

    // doc ready 
    jQuery(function() { 
     // xcounter var to indicate if function has run 
     var hasSwapped = 0; 

     // function to switch images to larger images 

     function swapImages() { 

      // for each image 
      jQuery('.yourImgClass').each(function() { 
       // cache selector 
       var $this = jQuery(this); 
       // get new src attribute 
       var newSrc = $this.attr('data-responsive'); 
       // assign new image source 
       $this.attr('src', newSrc); 
       // update counter so function doesn't keep running 
       hasSwapped = 1; 
      }); 
     } 

     // set breakpoint width 
     var breakPoint = 850; 

     // on resize of window 
     jQuery(window).resize(function() { 
      // assess the width of the viewport 
      var currentWidth = getViewPortWidth(); 
      // if the current width is bigger than the required breakpoint and the function has not been run 
      if (currentWidth >= breakPoint && hasSwapped < 1) { 
       // run the swap image function 
       swapImages(); 
      } 

     }); // end resize 

    // you may also want to check you have the right image on doc ready as well, so you could do this: 

     // get viewportWidth 
     var initWidth = getViewPortWidth(); 
     // if the initial width is bigger than the required breakpoint and the function has not been run 
     if (initWidth >= breakPoint && hasSwapped < 1) { 
     // run the swap image function 
      swapImages(); 
     }  


}); // close doc ready 

希望幫助一些 - 馬克

Answer 2

您也可以嘗試的響應圖jQuery插件。它只是你所需要的，儘管我不確定它在WordPress中的工作方式。 http://responsiveimg.com

Answer 3

如果您能夠稍微改變標記，這是我對快速響應/視網膜的一種嘗試。 https://github.com/scottjehl/picturefill

你也可以修改JS來匹配你的標記。

Answer 4

使用enquire.js你可以做一些簡單的像這樣：

<img alt="" data-respond="(min-width:768px)" data-respond-src="logo.jpg" src="logo-sm.jpg" role="logo" id="logo" /> 

$('img[data-respond][data-respond-src]').each(function(){ 
    var $el= $(this), 
     src_org = $el.attr('src'); 

    enquire.register($el.data('respond'), { 
     match: function(){    
      $el.attr('src', $el.data('respond-src')); 
     }, 
     unmatch: function(){     
      $el.attr('src', src_org);  
     }    
    }); 
});