㈠ javascript圖片預載入和延時載入的區別
javascript圖片預載入和延時載入的區別主要體現在圖片傳輸到客戶端的時機上，都是為了提升用戶體驗的,延時載入又叫懶載入。
兩種技術的本質：兩者的行為是相反的，一個是提前載入，一個是遲緩甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用，預載入則會增加伺服器前端壓力。
預載入：提前載入圖片，當用戶需要查看時可直接從本地緩存中渲染。
實現方式： 可以用CSS(background)、js(Image)、HTML(<img />)都可以。常用的是new Image();設置其src來實現預載，再使用onload方法回調預載完成事件。只要瀏覽器把圖片下載到本地，同樣的src就會使用緩存，這是最基本也是最實用的預載方法。當Image下載完圖片頭後，會得到寬和高，因此可以在預載前得到圖片的大小(方法是用記時器輪循寬高變化)。
懶載入：主要目的是作為伺服器前端的優化，減少請求數或延遲請求數，一些圖片非常多的網站中非常有用，在瀏覽器可視區域外的圖片不會被載入，直到用戶將頁面滾動到它們所在的位置才載入，這樣對於含有很多 圖片的比較長的網頁來說，可以載入的更快，並且還能節省伺服器帶寬。，實現方式：
1.第一種是純粹的延遲載入，使用setTimeOut或setInterval進行載入延遲.
2.第二種是條件載入，符合某些條件，或觸發了某些事件才開始非同步下載。
3.jQuery插件中也有插件來實現該功能。
4.第三種是可視區載入，即僅載入用戶可以看到的區域，這個主要由監控滾動條來實現，一般會在距用戶看到某圖片前一定距離遍開始載入，這樣能保證用戶拉下時正好能看到圖片。
預載入核心代碼參考：
document.getElementById("preload-01").style.background = "url(http://expsoft.com/image-01.png) no-repeat -9999px -9999px";
img1 = new Image();img1.src = "http://expsoft.com/path/to/image-001.gif";
if (img1.complete) { ready.call(img); load && load.call(img);
callback.call(img1,img1.width, img1.height);
return; }// 直接返回，不用再處理onload事件
img1.onload = function(){ callback.call(img1,img1.width, img1.height); };
懶載入核心代碼參考：
.lazy {
display: none;
}
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
必須在 DOM ready 時將佔位符顯示出來, 這可以在插件初始化的同時完成.
$("img.lazy").show().lazyload();
設置敏感度，默認情況下圖片會出現在屏幕時載入. 如果你想提前載入圖片, 可以設置 threshold 選項, 設置 threshold 為 200 令圖片在距離屏幕 200 像素時提前載入.
$("img.lazy").lazyload({ threshold : 200 });
㈡ 圖片懶載入和預載入
懶載入也叫延遲載入，指的是在長網頁中延遲載入圖像，是一種很好優化網頁性能的方式 。用戶滾動到它們之前，可視區域外的圖像不會載入。這與圖像預載入相反，在長網頁上使用延遲載入將使網頁載入更快。在某些情況下，它還可以幫助減少伺服器負載。常適用圖片很多，頁面很長的電商網站場景中。
首先將頁面上的圖片的 src 屬性設為空字元串，而圖片的真實路徑則設置在data-original屬性中， 當頁面滾動的時候需要去監聽scroll事件，在scroll事件的回調中，判斷我們的懶載入的圖片是否進入可視區域,如果圖滲配片在可視區內將圖片的 src 屬性設置為data-original 的值，這樣就可以實現延遲載入。
資源預載入是另一個性能優化技術，我們可以使用該技蘆賀術來預先告知瀏覽器某些資源可能在將來會被使用到。 預載入簡單來說就是將所有所需的資源提前請求載入到本地，這樣後面在需要用到時就直接從緩存取資源 。
在網頁全部載入之前，對一些主要內容進行載入，以提供給用戶更好的體驗，減少等待的時間。否則，如果一個頁面的內容過於龐大，沒有使用預載入技術的頁面就會長時間的展現為一片空白，直到所有內容載入完畢。
<img src="http://pic26.nipic.com/20121213/6168183 0044449030002.jpg" style="display:none"/>
<script src="./myPreload.js"></script>
PreloadJS提叢嘩指供了一種預載入內容的一致方式，以便在HTML應用程序中使用。預載入可以使用HTML標簽以及XHR來完成。默認情況下，PreloadJS會嘗試使用XHR載入內容，因為它提供了對進度和完成事件的更好支持，但是由於跨域問題，使用基於標記的載入可能更好。
兩者都是提高頁面性能有效的辦法， 兩者主要區別是一個是提前載入，一個是遲緩甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用，預載入則會增加伺服器前端壓力
轉： https://juejin.cn/post/6844903614138286094
㈢ 關於圖片預載入的問題,高分求助
「第一執行圖片成功載入，第二次由於緩存已存在此圖片而導致圖片載入不了」，如果想解決此問題，提供一個簡便的方法：在圖片的URL後面加一個參數 img.src+"?t="+(new Date()); 即可