javascript - 延迟加载图像

Question

我试图阻止立即加载 View 之外的图像。我发现似乎已被接受的做法是将图像 src 放入另一个属性中，然后在需要加载图像时将其移至 src 属性中。

我正在 JavaScript 中插入一些图像

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

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

为什么会这样以及如何避免它们被完全加载？

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

更多详细信息:

这些图像来自 Google Feeds API 加载的 RSS 源。

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