6

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

当我创建一个 DOM 元素时，浏览器正在下载图像的内容。我想知道是否可以停止这个 Beauvoir 并暂时阻止加载。

我的目标是 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;
    },
4

4 回答 4

9

将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);
    });
});
于 2013-10-03T13:31:44.810 回答
4

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

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

网络爬虫和关闭 JS 的人会看到图像，就好像noscript不存在一样，但其他浏览器会完全忽略noscript and img标签。

然后，您可以使用 JavaScript 做任何您想做的事情，例如（使用 jQuery）：

$('noscript.img').replaceWith(function(){
    return $(this.innerText).removeAttr('src');
});
于 2015-03-04T14:31:30.773 回答
2

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

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

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

希望这可以帮助。

于 2013-10-03T13:30:53.883 回答
0

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

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

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

于 2013-10-03T13:35:49.457 回答