Question

我正在尝试使用foresight.js在wordpress博客中提供响应式图像。为此，我必须在<img>标记的src位置添加data-src属性。

或者我必须从帖子中的图片中获取网址，并且需要将新标记绑定在旧<img>标记附近，并将旧<img>标记包装在<noscript>标记中。我不知道该怎么做。

基本上它看起来像这样：

<img data-src="http://foresightjs.appspot.com/dynamic-images/px-wright-flyer.jpg" data-aspect-ratio="auto" class="fs-img">

<noscript>
    <img src="http://foresightjs.appspot.com/dynamic-images/1024px-wright-flyer.jpg">
</noscript>`

Answer 1

使用jQuery：

$('img').each(
    function(i,el){
        var that = $(el);
        $('<img />').attr('data-src', el.src).insertBefore(el);
        that.wrap('<noscript />');
    });

JS Fiddle demo

或者，略有不同：

$('img').each(
    function(i,el){
        $(el).wrap('<noscript />').clone().insertBefore(el.parentNode).data('src', el.src).removeAttr('src');
    });

JS Fiddle demo

调整后添加class：

$('img').each(
    function(i,el){
        $(el).wrap('<noscript />').clone().insertBefore(el.parentNode).data('src', el.src).removeAttr('src').addClass('newClass');
    });

JS Fiddle demo

但是，如上所述，noscript完全没必要，您也可以使用JavaScript调整图像（因为如果禁用JavaScript，图像将保持不变）：

$('img').each(
    function(i,el){
        $(el).attr('data-src', el.src).removeAttr('src').addClass('newClass');
    });

JS Fiddle demo。参考文献：

如何使用jquery绑定post中图像的data-src属性？

1 个答案: