1

我试图防止立即加载视图外的图像。我发现似乎可以接受的方法是将图像 src 放在另一个属性中，然后在需要加载图像时将其移动到 src 属性中。

我在 javascript 中插入一些图像

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

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

Chrome DevTools 资源选项卡 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 进行遍历？

4

1 回答 1

0

你可以使用这样的函数，它可能并不完美，但我认为它已经足够好了：

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">"
于 2013-09-29T22:07:36.733 回答