dw自动滚动图片_3分钟搞定图片懒加载
什么是圖片懶加載
圖片的懶加載就是在頁面打開的時候，不要一次性全部顯示頁面所有的圖片，而是只顯示當前視口內的圖片，一般在移動端使用（PC端主要是前端分頁或者后端分頁）。
為什么需要懶加載
對于一個頁面加載速度影響最大的因素之一就是圖片資源，如果一個頁面圖片太多（比如某寶，某東等），整個頁面的圖片大小可以到達幾百兆，即使在百兆寬帶，全部下載的話，也需要上十秒的時間，這對于用戶耐心的考驗是巨大的，更別說網絡差的地方了。
因此，懶加載是必須要做的，對于頁面未在可視區域內顯示的圖片先不做加載處理，只加載第一映入眼簾的圖片，由于可視區域顯示的圖片少，加載速度就會大大提升，用戶體驗也會更好。
而且，用戶可能只翻看一兩頁就退出了，剩下未查看的圖片也就不需要加載了。這也相當于節省了帶寬資源。
懶加載實現原理
由于瀏覽器會自動對頁面中的img標簽的src屬性發送請求并下載圖片。因此，通過html5自定義屬性data-xxx先暫存src的值，然后在需要顯示的時候，再將data-xxx的值重新賦值到img的src屬性即可。
實現代碼
這里模擬兩種情況：
情況一
1、前端已經獲取到所有的圖片了，現在需要將這些圖片以懶加載的形式展示。
例子如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>懶加載Demo1</title><style>.box {width: 600px;margin: 0 auto;}img {width: 100%;}</style> </head> <body><div class="box"><img src="./images/1.jpg" alt=""><img src="./images/2.jpg" alt=""><img src="./images/3.jpg" alt=""><img src="./images/4.jpg" alt=""><img src="./images/5.jpg" alt=""><img src="./images/6.jpg" alt=""><img src="./images/7.jpg" alt=""><img src="./images/8.jpg" alt=""><img src="./images/9.jpg" alt=""><img src="./images/10.jpg" alt=""></div> </body> </html>可以看出，10張圖片是一次性全部加載完的。
下面改造成懶加載：
首先將頁面上的圖片的 src 屬性設為空字符串，而圖片的真實路徑則設置在src屬性中。
當頁面滾動的時候需要去監聽scroll事件，在scroll事件的回調中，判斷我們的懶加載的圖片判斷是否出現在視口內，如果出現在視口內，則將src賦值到src。
如何判斷一個元素是否在視口內呢？
通過getBoundingClientRect()方法來獲取元素的大小以及位置。這個方法返回一個名為ClientRect的DOMRect對象，包含了top、right、botton、left、width、height這些值。
隨著滾動條的向下滾動，bound.top會越來越小，也就是圖片到可視區域頂部的距離越來越小，當bound.top <= clientHeight時，圖片的上沿應該是位于可視區域下沿的位置的臨界點，再滾動一點點，圖片就會進入可視區域。
function isInSight(el) {const bound = el.getBoundingClientRect();const clientHeight = window.innerHeight;//如果只考慮向下滾動加載//const clientWidth = window.innerWeight;return bound.top <= clientHeight + 100; // 這里有個+100是為了提前加載。 }源代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>懶加載Demo1</title><style>.box {width: 600px;margin: 0 auto;}img {width: 100%;height: 600px;}</style> </head> <body><div class="box"><img src="" alt="" src="./images/1.jpg"><img src="" alt="" src="./images/2.jpg"><img src="" alt="" src="./images/3.jpg"><img src="" alt="" src="./images/4.jpg"><img src="" alt="" src="./images/5.jpg"><img src="" alt="" src="./images/6.jpg"><img src="" alt="" src="./images/7.jpg"><img src="" alt="" src="./images/8.jpg"><img src="" alt="" src="./images/9.jpg"><img src="" alt="" src="./images/10.jpg"></div> </body> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script>$(function () {// 第一次需要先加載一次lazyLoad();$(window).scroll(lazyLoad);function isInSight(el) {const bound = el.getBoundingClientRect();const clientHeight = $(window).height(); // 可視區高度return bound.top <= clientHeight + 100; // 這里有個+100是為了提前加載。}function lazyLoad() {$.each($('.box img'), (index,item)=>{if(isInSight(item)) {$(item).attr('src', $(item).attr('src'));}});}}); </script> </html>當向下滑動的時候，從Network面板可以看到，剩下的圖片是一個個加載的。
可能有人疑問為什么第一次加載了4張，而不是3張？
因為我在判斷是否在可視區內加了100 ，return bound.top <= clientHeight + 100; 可以提前加載一張圖片。
注意：一定要設置圖片的高度。提示：src的賦值在js原生和jq是不同的，混用的話不會生效。
用js原生方法：document.getElementById("imageId").src = "xxxx.jpg"; 用Jquery方法：$("#imageId").attr("src","xxxx.jpg");
而下面的兩種都不會生效： $("#imageId").src = "xxxx.jpg"; document.getElementById("imageId").attr("src","xxxx.jpg");
切記！
情況二
2、前端從后端獲取圖片進行展示，后端進行分頁。
思路：當頁面滾動的時候需要去監聽scroll事件，在scroll事件的回調中，判斷滾動條是否滾動到最底部，如果是，則將將圖片的 src 屬性設置為src的值。
判斷是否滾動到最底部的方法：滾動條到頂部距離 + 可視頁面高度 >= 當前頁面高度
var seeHeight = document.documentElement.clientHeight; // 可視頁面高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滾動條到頂部距離 var bodyHeight = document.body.offsetHeight // 當前頁面高度然后判斷： scrollTop + seeHeight >= bodyHeight當滾動條到達底部的時候，獲取后端分頁的數據。
這里使用一個模擬接口來獲取數據： https://www.apiopen.top/meituApi?page=1
page為頁碼數，一次返回20條數據。當page=0時，會隨機返回一頁數據，page>=1時會返回相應頁碼的數據。
源代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>懶加載Demo1</title><style>.box {width: 600px;margin: 0 auto;}img {width: 100%;height: 600px;}</style> </head> <body><div class="box"></div> </body> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script>$(function () {let pageNum = 2; // 因為第一頁沒有圖片，我從第二頁開始的getImage(pageNum);$(window).scroll(lazyLoad);function getImage(pageNum) {$.ajax({url:'https://www.apiopen.top/meituApi?page='+pageNum,type: 'GET',success(res) {// 遍歷圖片，將圖片加入div中if(res.code === 200 && res.data) {res.data.forEach((item,index)=>{$('.box').append(`<img src="${item.url}">`);});}},});}function lazyLoad() {let seeHeight = document.documentElement.clientHeight;let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;let bodyHeight = document.body.offsetHeight;if((Math.ceil(seeHeight + scrollTop) >= bodyHeight)) { // 向上取整的原因是可能有小數getImage(++pageNum);}}}); </script> </html>當滾動到20張圖的底部的時候，就會發出ajax請求，請求下一頁數據。
至此本文完，有疑問可以在評論區隨時交流哈。
（啾咪 ^.<）
總結
以上是生活随笔為你收集整理的dw自动滚动图片_3分钟搞定图片懒加载的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ddr4服务器内存频率_镁光出样DDR5
- 下一篇： 显卡mx150和230哪个好_建模渲染用