CVPR 2022 | 細節還是偽影：用於現實影象超解析度的區域性判別學習
懶載入的概念
懶載入也叫做延遲載入、按需載入，指的是在長網頁中延遲載入圖片資料，是一種較好的網頁效能優化的方式。
在比較長的網頁或應用中，如果圖片很多，所有的圖片都被加載出來，而使用者只能看到可視視窗的那一部分圖片資料，這樣就浪費了效能。如果使用圖片的懶載入就可以解決以上問
題。在滾動螢幕之前，視覺化區域之外的圖片不會進行載入，在滾動螢幕時才載入。這樣使得網頁的載入速度更快，減少了伺服器的負載。懶載入適用於圖片較多，頁面列表較長（長
列表）的場景中。
懶載入的特點
減少無用資源的載入
使用懶載入明顯減少了伺服器的壓力和流量，同時也減小了瀏覽器的負擔
提升使用者體驗
如果同時載入較多圖片，可能需要等待的時間較長，這樣影響了使用者體驗，而使用懶載入就能大大的提高使用者體驗。
防止載入過多圖片而影響其他資原始檔的載入
懶載入的實現原理
圖片的載入是由src引起的，當對src賦值時，瀏覽器就會請求圖片資源。
根據這個原理，我們使用HTML5 的data-xxx屬性來儲存圖片的路徑，在需要載入圖片的時候，將data-xxx中圖片的路徑賦值給src，這樣就實現了圖片的按需載入，即懶載入。
懶載入的實現重點在於確定使用者需要載入哪張圖片，在瀏覽器中，可視區域內的資源就是使用者需要的資源。所以當圖片出現在可視區域時，獲取圖片的真實地址並賦值給圖片即可。
使用原生JavaScript實現懶載入
window.innerHeight 是瀏覽器可視區的高度
document.body.scrollTop || document.documentElement.scrollTop 是瀏覽器視窗頂部與文件頂部之間的距離，也就是滾動條滾動的距離
imgs.offsetTop 是元素頂部距離文件頂部的高度（包括滾動條的距離）
圖片載入條件：img.offsetTop < window.innerHeight + document.body.scrollTop;
程式碼實現
<body> <div class="container"> <h6>圖片懶載入</h6> <img data-src="/images/login-bg-3.jpg" src="/images/login-bg-4.jpg"><br><img data-src="/images/login-bg-1.jpg" src="/images/login-bg-4.jpg"><br> <img data-src="/images/login-bg.jpg" src="/images/login-bg-4.jpg"><br> <img data-src="/images/login-bg-3.jpg" src="/images/login-bg-4.jpg"><br> <img data-src="/images/login-bg-old.jpg" src="/images/login-bg-4.jpg"><br> <img data-src="/images/login-bg-1.jpg" src="/images/login-bg-4.jpg"><br> <img data-src="/images/login-bg.jpg" src="/images/login-bg-4.jpg"><br> </div> </body> <script> var imgs = document.querySelectorAll('img') function lazyLoad() { var scrollTop = document.body.scrollTop || document.decumentElement.scrollTop var windowHeight = window.innerHeight for (var i = 0; i < imgs.length; i++) { if (imgs[i].offsetTop < scrollTop + windowHeight) { imgs[i].src = imgs[i].getAttribute('data-src') } } } window.onscroll = lazyLoad() </script>
getBoundingClientRect API 實現
程式碼實現
data(){ return{ flag: true } }, created() { //this.lazyLoad(); this.throttle(this.lazyLoad, 3000)() //首次進入載入 }, mounted() { const that = this; window.addEventListener('scroll',()=>{ that.throttle(that.lazyLoad, 2000)() //that.lazyLoad() }) }, methods:{ //節流優化 throttle(fn, delay){ const that = this; return function () { if (!that.flag) return; that.flag = false; //沒執行過就一直是false，會直接return setTimeout(() => { fn.apply(that, arguments); that.flag = true; //setTimeout執行完畢後再把標記設定為true(關鍵)表示可以執行下一次迴圈了。當定時器沒有執行的時候標記永遠是false，在開頭被return掉 }, delay); } }, lazyLoad(){ let images = document.getElementsByTagName('img') //不是陣列，htmlCollection遍歷時要注意 //加定時器的目的是為了讓images能夠遍歷到 setTimeout(()=>{ for(let i =0;i<images.length;i++){ if(images[i].getBoundingClientRect().top<document.body.clientHeight){ //getBoundingClientRect().top 元素的上邊相對瀏覽器視窗的位置如果小於可視視窗的高度 images[i].src = images[i].dataset.src; } } },300) } }
懶載入與預載入的區別
這兩種方式都是提高網頁效能的方式，兩者主要區別是一個是提前載入，一個是遲緩甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用，預載入則會增加伺服器前端壓力。
懶載入
懶載入也叫延遲載入，指的是在長網頁中延遲載入圖片的時機，當用戶需要訪問時，再去載入，這樣可以提高網站的首屏載入速度，提升使用者的體驗，並且可以減少伺服器的壓力。它
適用於圖片很多，頁面很長的電商網站的場景。懶載入的實現原理是，將頁面上的圖片的 src 屬性設定為空字串，將圖片的真實路徑儲存在一個自定義屬性中，當頁面滾動的時候，
進行判斷，如果圖片進入頁面可視區域內，則從自定義屬性中取出真實路徑賦值給圖片的 src 屬性，以此來實現圖片的延遲載入。
預載入
預載入指的是將所需的資源提前請求載入到本地，這樣後面在需要用到時就直接從快取取資源。通過預載入能夠減少使用者的等待時間，提高使用者的體驗。我瞭解的預載入的最常用的方
式是使用 js 中的 image 物件，通過為 image 物件來設定 src屬性，來實現圖片的預載入。
參考文章：