Question

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

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

我的目标是网络工具包和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属性中获取网址并将其设置为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>

网页抓取工具和关闭JS的人会看到图片，好像noscript没有，但其他浏览器会完全忽略noscript 和 { {1}}标签。

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

img

Answer 3

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

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

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

希望这有帮助。

Answer 4

为防止图像显示，您可以使用此功能。

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

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

如何防止<img/>标记加载其图像？

4 个答案: