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