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"/>

这将首先包括移动图像，与响应的最佳实践一致。确保您的图像在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

希望有所帮助 - 马克

Answer 2

您还可以尝试使用Responsive Img 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);       
        }             
    });
});

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

4 个答案: