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

我有以下脚本，其中包含HTML信息的字符串（也包含对图像的引用）。如何防止<img>标记加载其图像？

当我创建一个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; 
    },

来源

2013-10-03 GibboK

只要你设置了'src'属性，负荷将启动。所以一个解决方案就是不要设置'src'属性，直到你想要启动加载。 – rid

一旦它具有“src”的值，它将*下载。您可以停止下载的唯一方法是在发送到客户端之前停止它（服务器端脚本）。网页是如何创建的 - html/php/asp等？不要接受客户端的建议，因为你无法在浏览器中停止它 - 这太迟了。 – Archer

设置一个自定义的'data-src'属性来保存源，并且当你想要加载图像时，在调用这个方法时我设置实际的'src'属性为 – tymeJV

我想你应该颠倒逻辑，默认不和需要的图像瞬间加载图片，更新它的src属性告诉浏览器开始加载。

甚至更好的办法是使用一些jQuery的懒图像加载插件，像这样的：

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

希望这有助于。

来源

2013-10-03 13:30:53 Robert

感谢您的回答，我对我的问题添加了一条评论 – GibboK

将src路径存储为HTML5数据属性，如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-03 13:31:44 lightswitch05

为了防止节目图像，就可以用这个。

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

这可能会非常棘手，并给出意想不到的结果，但它确实如此。

来源

2013-10-03 13:35:49 PMint

这可能会删除图片在页面上显示的内容，但是如果Idk阻止浏览器在下载启动后在后台下载它们首先。由于这是在$（document）.ready（）中，因此原始页面标记中存在的''标记中的所有*都将开始下载。 – ajp15243

没有想到这一点，尽管这可能是，如果你知道我的意思，它已经接近答案了。 – PMint

通过流行的图像库，Slimmage采取的办法，是来包装你img标签noscript标签：

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

网络刮削器和人JS关闭，将会看到图像仿佛noscript不但其他浏览器将完全忽略noscript和img标签。

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

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

来源

2015-03-04 14:31:30 Tamlyn

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

回答

相关问题