延迟加载图像

Question

我正试图阻止视线图像立即加载。我已经找到了似乎被接受的内容，包括将图像src放在另一个属性中，然后在需要加载图像时将其移动到src属性中。

我在javascript中插入了一些图片

'<img src="img/grey.png" data-original="'+image.src+'" />'

在Chrome DevTools中，我可以看到正在加载的图像（在我实现加载它们的代码之前）。

为什么会这样，我怎样才能避免它们被完全加载？

我在禁用缓存的情况下运行。

更多详情：

图片来自Google Feeds API加载的RSS Feed。

feedpointer.load( function (result) {
    if ( !result.error ) {
        $.each( result.feed.entries, function (e, val) {
            tempContent = $( '<div>' + val.content + '</div>' );
            image = tempContent.find( 'img' );
            $('.col_'+id).html('<img src="img/grey.png" data-original="'+image.src+'" />');
        });
    }
}

这就是要点。我可以通过DevTools看到图像在页面上绝对没有其他地方。我认为Feed API不会加载它们，因为它们包含在文本中。

我相信tempContent = $( '<div>' + val.content + '</div>' );可能是导致图片加载的违规代码。是否可以将字符串遍历为DOM？

Answer 1

你可以使用这样的功能，这可能不完美，但我认为这已经足够了：

function hideImgSrc( html ){
  return html.replace(/<img[^>]*?>/gi, function( match ){
    return match.replace(/\bsrc(\s*=\s*['"])/gi, function( match, after ){
      return 'data-original' + after;
    });
  });
}

hideImgSrc('<img src = "hello">') --> "<img data-original = "hello">"