如何防止<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>標記加載其圖像？

回答

相關問題