當我無法修改某些源代碼時，如何控制圖像加載？

我正在使用一系列插件輸出某些標記的模板系統中工作。其中一個插件是包含多個圖像的圖庫。隨着圖庫尺寸的增加，加載速度受到影響，我正試圖想出一個創造性的方法來解決它。當我無法修改某些源代碼時，如何控制圖像加載？

下面是一個例子：
{% plugin gallery %}

將變爲：

<div id="gallery"> 
    <img src="sample.png" alt="Sample Image"> 
    <img src="sample.png" alt="Sample Image"> 
    <img src="sample.png" alt="Sample Image"> 
    <img src="sample.png" alt="Sample Image"> 
    <img src="sample.png" alt="Sample Image"> 
</div>

我不能控制就是BEING輸出的內容，只有額外的HTML包裹。這顯然導致了5個圖像被加載

一種技術來加載圖像，當你想要他們是給他們一個假的屬性，然後當你想加載（例如），然後變成src但我不能編輯該輸出。

我的另一個想法是用一些東西來包裝所有輸出，以防止加載，比如HTML註釋，然後剝離/使用一些JavaScript數據來根據需要重建圖像元素並將它們附加回DOM 。這看起來很不舒服，而且我沒有想法。

摘要：

我想阻止加載圖片，所以我可以加載它們，因爲我希望他們和控制頁面加載好。
我無法編輯圖像標記的標記，但可以附加標記。
我受限於客戶端語言（HTML/JS）。在這種情況下，我不能使用服務器端語言或修改服務器本身。

任何其他技術可以在這裏工作？

來源

2013-04-22 Anders H

如果您在說您無法更改HTML內容中的<img>標籤，那麼您就被卡住了。沒有什麼你可以用JavaScript或HTML做的事情會阻止它們加載，然後允許你在加載時進行控制。

JavaScript不能在DOM上操作，直到圖像已經開始加載後，它們將在您使用javascript獲得控件時已經加載。

在某些瀏覽器中打包HTML註釋可能會有問題，因爲我讀過並非所有瀏覽器都保留註釋內的內容。

使用CSS規則（display: none或visibility: hidden）呈現圖像不可見的各種方法不會阻止它們加載。

來源

2013-04-22 17:04:27 jfriend00

呀，這可能只是答案，但我很樂觀，有可能是一個創造性的解決方案在那裏，例如別的東西，我可以用評論以外的其他東西包裝它。 – 2013-04-22 17:18:32

~~將它包裝在code塊中，並用Javascript解析出來。你有這樣的想法，但這不會因jfriend00的答案中提到的問題而受到影響。註釋。~~

基本上是的，你必須做一些hacky，因爲非hacky的東西是接收更少的img s。

服務器是否支持分頁或最大請求大小？
模板系統是否支持最大請求？或者基本形式的邏輯if(num > MAX) return;？

來源

2013-04-22 17:15:26 djechlin

不幸的是，它似乎仍然在這種情況下加載：http://jsfiddle.net/andershaig/YY7wh/1/ – 2013-04-22 17:16:47

@AndersH做我的編輯說任何有用的？ – djechlin 2013-04-22 17:25:21

我可以限制返回的圖像數量，但內容會解析一次。我沒有任何機會只獲取前5張圖片，然後再渲染5張圖片，解析/渲染步驟僅在頁面加載時發生一次，然後這就是我堅持使用的標記。這可能只是一個有其他選擇的環境。 – 2013-04-22 17:26:33

當我無法修改某些源代碼時，如何控制圖像加載？

回答

相關問題