推遲img加載，直到頁面加載後？

我想知道是否有任何標準推遲所有負載，然後通過編程方式後來調用它們？有興趣做類似Facebook的事情，其中極小的模糊JPEG被設置爲背景圖像，然後在頁面加載中調用完整的res圖像。推遲img加載，直到頁面加載後？

實施例：

HTML

<img class='load-later' src='example.com/image.jpg'>

CSS

img.load-later { 
    background-image: url('blurry-preview.jpg'); 
}

function pageLoad() { 
    $('.load-later').load(); 
}

來源

2015-11-03 Isaac Hinman

這就是所謂的漸進式加載http://webmasters.stackexchange.com/questions/574/progressive-jpeg-why-do-many-web-sites-avoid-rendering-jpegs-that-way-pros如果你現在想要到延遲加載圖像，然後有許多插件已經可用，例如：http://www.appelsiini.net/projects/lazyload但現在，我不知道你的問題是什麼？！？ –

首先將src屬性設置爲「blurry-preview.jpg」圖像，然後在稍後階段將其更改爲實際圖像src。愚蠢的，簡單的例子（使用JQuery）：

<img src="blurry-preview.jpg" alt="something" class="imgo" /> 

$(document).ready(function() { 
    $('.imgo').attr('src', 'goodlooking-image.jpg'); 
});

這使得更多的意義，如果你例如使用的img標籤與數據 - [X]屬性持有SRC（或其他屬性），你想申請以後。這裏是修改「srcset」和代替SRC「大小」的一個示例：

<img src="blurry-preview.jpg" alt="something" class="imgo" data-srcset="m.jpg 300w, l.jpg 600w" data-sizes="(max-width: 500px) 100vw, (max-width: 1000px) 33vw, 600px" />

的Javascript使用來自它的數據改變圖像標記的數據 - [X]的屬性（修改srcset /尺寸而非SRC，按您的請求）：

$(document).ready(function() { 
    $('.imgo').each(function() { 
     $this = $(this) 
     $this.attr('srcset', $this.data('srcset')); 
     $this.attr('sizes', $this.data('sizes')); 
    }); 
});

來源

2015-11-03 15:36:51 Culme

任何方法來使這與srcset兼容？ –

@JohnDoe使用其他屬性而不是'src'，它在分析時會使圖像加載。 E.，使用'data-src'並在頁面加載'$（window）.on（'load'，function（）{$（'img [data-src]'）。each（function（）{this.src = this.dataset.src;}）;}）;' –

@John Doe，是的，如果你願意，你可以在加載完成後操作圖像的srcset和sizes屬性。在Chrome中進行測試，即使它們是動態添加的，它似乎也會應用這些屬性。在JQuery $（document）.ready（...）中，並且最初不存在。 – Culme

您可以將圖像加載到文檔上準備就緒。如下所示：

$(document).ready(function() { 
// set images here 
});

您需要在文檔就緒功能中更新圖像的src屬性。

來源

2015-11-03 15:37:17

推遲img加載，直到頁面加載後？

回答

相關問題