0126.課件15&圖片延遲加載 · 原生js-2018

36. 圖片延遲加載怎么實現 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>珠峰培訓</title> <link rel="stylesheet" href="reset.min.css"> <style> .imgBox { margin: 20px auto; width: 1000px; height: 300px; /*設置一張默認的占位背景圖:圖片沒有顯示之前，顯示的是默認圖*/ background: url("img/default.gif") no-repeat center center #EEE; } .imgBox img { display: none;/*開始的時候由于圖片沒有加載，我們讓其先隱藏，當真實圖片加載完成的時候我們在讓其顯示即可（某些瀏覽器在圖片SRC為空或者加載的圖片不存在的時候，不是不顯示，而是顯示一個×，不好看）*/ width: 100%; height: 100%; } </style> </head> <body> <div class="imgBox" id="imgBox">  <img src="" data-src="img/banner1000.jpg" alt=""> </div> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/8.js"></script> </body> </html> ~~~ ~~~ /* * 圖片延遲加載（圖片懶加載） * 前端性能優化的重要手段之一，開始加載頁面的時候，并沒有加載真實的圖片， * 當頁面結構和數據都呈現完成后，在加載真實的圖片 * * 1.在結構上，我們把IMG圖片放到一個DIV盒子中， * 開始的時候圖片的SRC(SRC中有地址就按照地址加載圖片)為空， * 我們把圖片的地址存放到自定義屬性DATA-SRC中（此位置不展示真實的圖片）， * 我們給圖片所在的盒子設置一個默認的背景圖片占位(要求這張圖片越小越好 1KB) * 2.在JS中，當監聽到頁面中的結構和數據都加載完成后（或者設置一個間隔時間）， * 開始把DATA-SRC自定義屬性中存儲的真實圖片地址賦值給IMG的SRC屬性（ * 瀏覽器此時開始加載真實的圖片 =>為了防止圖片地址不存在導致的404錯誤， * 我們在賦值給圖片的SRC屬性時，往往都會驗證一下圖片是否存在） */ //=>當頁面加載完成（結構、數據、DOM等都加載完成） // window.onload=function(){} //=>也可以設置一個定時器，間隔多長時間后在加載真實圖片 // （定時器是異步的，所以定時器能執行，也代表頁面加載完成） // setTimeout(function(){},100); var imgBox = document.getElementById('imgBox'), pageImg = imgBox.getElementsByTagName('img')[0]; setTimeout(function () { //=>加載真實圖片 var trueImg = pageImg.getAttribute('data-src'); //=>創建一個臨時的IMG來驗證 // var tempImg = document.createElement('img'); var tempImg = new Image(); tempImg.onload = function () { //=>圖片加載成功觸發這個事件 pageImg.src = trueImg; pageImg.style.display = 'block'; tempImg = null; }; tempImg.src = trueImg; //=>在部分IE瀏覽器中只有把SRC賦值放到ONLOAD下面才能起到作用 //=>這樣做不好：如果圖片不存在，在部分瀏覽器中，頁面中的IMG部分顯示的是一個叉叉， // 不好看（我們最好在賦值給頁面的SRC屬性的時候，先驗證一下圖片是否存在，存在我們在賦值） // pageImg.src = trueImg; // pageImg.style.display = 'block'; }, 1000); ~~~ ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>珠峰培訓</title> <link rel="stylesheet" href="reset.min.css"> <style> .container { margin: 20px auto; width: 1000px; } .container .imgBox { margin-bottom: 20px; height: 300px; background: url("img/default.gif") no-repeat center center #EEE; } .container .imgBox img { display: none; width: 100%; height: 100%; } </style> </head> <body> <div class="container">  </div> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/9.js"></script> </body> </html> ~~~ 8.js ~~~ $(function () { let $container = $('.container'), $imgList = null; //1.先綁定數據 ~function () { let str = ``; for (let i = 0; i < 100; i++) { let ran = Math.round(Math.random() * 3 + 1); str += `<div class="imgBox"> <img src="" alt="" data-src="img/banner${ran}.jpg"> </div>`; } $container.html(str); $imgList = $container.find('img'); }(); //2.加載真實的圖片 //=>lazyImg:單張圖片延遲加載(傳遞給我誰,我就加載誰) let lazyImg = curImg => { let $curImg = $(curImg), trueImg = $curImg.attr('data-src'); let tempImg = new Image(); tempImg.onload = () => { // $curImg.attr('src', trueImg).css({ // display: 'block' // }); $curImg.attr('src', trueImg) .stop().fadeIn(300);//=>結束當前正在運行的動畫,執行FADE-IN,讓圖片300MS內漸現出來(JQ中提供的動畫方法) tempImg = null; curImg.isLoad = true; //=>圖片加載成功后，設置一個自定義屬性存儲當前圖片已經加載了，后期不需要重復的加載 }; tempImg.src = trueImg; }; //=>computedImg:計算哪張圖片可以加載了 let computedImg = () => { //=>觀察所有圖片中誰能加載了，就執行LAZY-IMG讓其加載即可 $imgList.each((index, curImg) => { //=>A:當前圖片所在盒子的底邊距離BODY偏移 //=>B:當前瀏覽器底邊距離BODY偏移 let $curImg = $(curImg), $imgBox = $curImg.parent(), A = $imgBox.offset().top + $imgBox.outerHeight(), B = document.documentElement.scrollTop + document.documentElement.clientHeight; if (A <= B) { //=>代表圖片所在盒子呈現在視野中，開始加載真實的圖片 if (curImg.isLoad) { //=>當前圖片如果已經加載過了，不在重復的加載 return; } lazyImg(curImg); } }); }; $(window).on('load scroll', computedImg); //=>LOAD和SCROLL的時候做相同的事情（JQ中的事件綁定特點） }); ~~~