如何预防 <img> 标签加载其图像？

Question

我有以下脚本，其中包含带有html信息的字符串（还包含对图像的引用）。

当我创建DOM元素时，浏览器正在下载图像的内容。 我想知道是否有可能阻止这个波伏瓦并暂时阻止装载。

我的目标是web-kit和presto浏览器。

  relativeToAbosluteImgUrls: function(html, absoluteUrl) {
        var tempDom = document.createElement('div');
        debugger
        tempDom.innerHTML = html;
        var imgs = tempDom.getElementsByTagName('img'), i = imgs.length;
        while (i--) {
            var srcRel = imgs[i].getAttribute('src');
            imgs[i].setAttribute('src', absoluteUrl + srcRel);
        }
        return tempDom.innerHTML;
    },

Answer 1

将src路径存储到HTML5 data- *属性中，例如data-src 。 如果没有设置src ，浏览器将不会下载任何图像。 准备好下载映像时，只需从data-src属性中获取URL并将其设置为src属性

$(function() {
    // Only modify the images that have 'data-src' attribute
    $('img[data-src]').each(function(){
        var src = $(this).data('src');
        // modify src however you need to, maybe make
        // a function called 'getAbsoluteUrl'
        $(this).prop('src', src);
    });
});

Answer 2

流行的图像库Slimmage采用的方法是将你的img标签包装在noscript标签中：

<noscript class="img">
  <img src="my-image.jpeg" />
</noscript>

Web浏览器和关闭JS的人会看到图像，好像noscript不存在，但其他浏览器将完全忽略noscript 和 img标签。

然后，您可以使用JavaScript来执行任何操作，例如（使用jQuery）：

$('noscript.img').replaceWith(function(){
    return $(this.innerText).removeAttr('src');
});

Answer 3

我认为你应该颠倒逻辑，不要默认加载图像，并且在需要图像时，更新它的src属性以告诉浏览器开始加载。

或者更好的方法是使用一些像这样的jquery懒惰图像加载插件：

http://www.appelsiini.net/projects/lazyload

希望这可以帮助。

Answer 4

为了防止显示图像，您可以使用它。

    $(window).loaded( function() { 
$("img").removeAttr("src");
 });

它可能很棘手并且会产生意想不到的结果，但它确实如此。