添加了 img 属性的响应式图像替换答案

【问题标题】：Responsive Image replacement with added img attributes添加了 img 属性的响应式图像替换
【发布时间】：2013-04-25 15:13:03
【问题描述】：

鉴于此 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>

是否可以通过 CSS 或 jQuery 将 src 属性替换为 data-responsive 属性的值？

我只想在特定的设备宽度断点处进行替换（css 媒体查询或 jQuery 窗口调整尺寸）

【问题讨论】：

标签： jquery css responsive-design media-queries

【解决方案1】：

使用 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);       
        }             
    });
});

【讨论】：

【解决方案2】：

如果您能够稍微更改标记，这是我对响应式/视网膜的首选。 https://github.com/scottjehl/picturefill

您还可以修改 JS 以匹配您的标记。

【讨论】：

【解决方案3】：

你也可以试试 Responsive Img jQuery 插件。它可以满足您的需求，尽管我不确定它在 WordPress 中是如何工作的。 http://responsiveimg.com

【讨论】：

【解决方案4】：

你可以这样做：

把你的标记改成这个

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

这将首先包括移动图片，符合响应式的最佳做法。确保您的图片在您的 css 中设置为 max-width: 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

希望对一些人有所帮助 - 马克

【讨论】：