1

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

或者我必须从帖子中的图像中获取 url，并且需要将我的新标签绑定在旧标签附近并将旧<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>`
4

1 回答 1

2

使用 jQuery：

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

JS 小提琴演示。

或者，略有不同：

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

JS 小提琴演示。

调整为添加class：

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

JS 小提琴演示。

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

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

JS 小提琴演示。参考：

于 2012-11-01T11:46:26.983 回答