使用添加的img属性进行响应的图像替换

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>

是否可以通过CSS或jQuery将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中将图像设置为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

希望这能有所帮助- Mark

Answer 2

您也可以尝试响应式Img jQuery插件。它做的正是您需要的，尽管我不确定它在WordPress中是如何工作的。http://responsiveimg.com

Answer 3

如果您能够稍微修改一下标记，这是我在responsive/retina s. https://github.com/scottjehl/picturefill上的首选。

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