整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
動截屏通常需要裝第三方軟件，又要面臨到底裝哪個截圖軟件最好用，其實(shí)谷歌瀏覽器就自帶滾動截屏功能。
日常的抓取工作當(dāng)中，經(jīng)?？吹骄W(wǎng)站為了減輕網(wǎng)頁加載所需資源對圖片等資源進(jìn)行延遲加載。那什么樣的頁面需要用到延遲加載呢？比如我們打開一個圖片網(wǎng)站，一個頁面有很多圖片，這個時候我們就用的到延遲加載；比如我們寫一篇很長的技術(shù)博客的時候也需要配一些圖，這里也可以用到延遲加載。那什么是延遲加載呢？簡單的說是一種對網(wǎng)頁的性能優(yōu)化，加載一個很多圖片的網(wǎng)頁不需要先把全部圖片加載出來，而是只加載可視區(qū)域的圖片即可，當(dāng)滾動到需要顯示圖片的地方再發(fā)送圖片請求。
<img> 標(biāo)簽有一個屬性是 src，用來表示圖像的 url，當(dāng)這個屬性的值不為空時，瀏覽器就會根據(jù)這個值發(fā)送請求。如果沒有 src 屬性，就不會發(fā)送請求。我們可以利用這一個特征去實(shí)現(xiàn)延遲加載，先不設(shè)置 src 屬性，當(dāng)需要圖片加載時將圖片真正的 url 取出放入 src 中。
.img-area{width: 500px;height: 500px; margin: 0 auto;}.my-photo{width:500px; height: 300px}<div class="container"> <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img1.jpg" /></div> <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img2.jpg" /></div> <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img3.jpg" /></div> <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img4.jpg" /></div> <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img5.jpg" /></div> <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img1.jpg" /></div> <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img2.jpg" /></div> <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img3.jpg" /></div> <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img4.jpg" /></div> <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img5.jpg" /></div> </div>
通過 getBoundingClientRect() 方法來獲取元素的大小以及位置
這個方法返回一個名為 ClientRect的 DOMRect對象，包含了 top、 right、 botton、 left、 width、 height 這些值。參考 mdn 上的圖：
可以看出返回的元素位置是相對于左上角而言的，而不是邊距。
什么情況下算進(jìn)入可視區(qū)域呢？這里的 container.top 即表示圖片到可視區(qū)域頂部距離，window.innerHeight 來表示可視區(qū)域的高度。隨著滾動條的向下滾動，container.top 會越來越小，也就是圖片到可視區(qū)域頂部的距離越來越小，當(dāng) container.top===window.innerHeight 時，圖片的上沿應(yīng)該是位于可視區(qū)域下沿的位置的臨界點(diǎn)。也就是說 container.top <=window.innerHeight 時，圖片是在可視區(qū)域內(nèi)的。
簡單判斷一下：
// 偽代碼function check(container) { var container=... // 100是為了讓圖片提前加載，過渡更自然
return container.top <=window.innerHeight + 100}替換 src，
function loadImg(container) { if (!container.src) container.src=container.dataset.src
}檢測圖片是否在可加載區(qū)域內(nèi)：
function checkImg() { var imgs=Array.from(document.querySelectorAll('.my-photo'))
imgs.forEach(container=> { if (check(container)) loadImg(container)
})
}到此基本就可以實(shí)現(xiàn)一個簡單的圖片延遲加載，但是老鳥告訴我要注意頻繁滾動等于頻繁的DOM操作，這個時候有必要設(shè)置函數(shù)節(jié)流，具體操作請參考 ，函數(shù)節(jié)流
可以參考阮一峰老師的 IntersectionObserver API 使用教程 ，這里講的深入淺出。
前端開發(fā)中經(jīng)常遇到需要考慮某個元素何時進(jìn)入視口容器，通常我們會選擇第一種方式來實(shí)現(xiàn)，監(jiān)聽 scroll 事件， 調(diào)用 getBoundingClientRect() 方法，這種方法確實(shí)是不錯的方法，但是要考慮函數(shù)節(jié)流，這也是它的缺點(diǎn)，由于 scroll 事件頻繁觸發(fā)，容易造成性能問題。
這個新的 API 可以自動觀察元素是否在視口內(nèi)，這就很強(qiáng)大了，讓我們看下怎么使用呢，
var io=new IntersectionObserver(callback, option);// 開始觀察io.observe(document.getElementById('example'));// 停止觀察io.unobserve(element);// 關(guān)閉觀察器io.disconnect();callback參數(shù)是一個數(shù)組，每個數(shù)組都是一個 IntersectionObserverEntry 對象，我們來打印下
屬性說明引用 阮一峰老師的
time：可見性發(fā)生變化的時間，是一個高精度時間戳，單位為毫秒
target：被觀察的目標(biāo)元素，是一個 DOM 節(jié)點(diǎn)對象
rootBounds：根元素的矩形區(qū)域的信息，getBoundingClientRect()方法的返回值，如果沒有根元素（即直接相對于視口滾動），則返回null
boundingClientRect：目標(biāo)元素的矩形區(qū)域的信息
intersectionRect：目標(biāo)元素與視口（或根元素）的交叉區(qū)域的信息
intersectionRatio：目標(biāo)元素的可見比例，即intersectionRect占boundingClientRect的比例，完全可見時為1，完全不可見時小于等于0
這里最重要的屬性就是 intersectionRatio，通過該屬性判斷是否在可視區(qū)域內(nèi)，當(dāng) intersectionRatio > 0 && intersectionRatio <=1 即在可視區(qū)域內(nèi)。
我們通過 IntersectionObserver 這個API 就很方便了，
// IntersectionObserver 傳入 callbackvar io=new IntersectionObserver(ioes=> {
ioes.forEach(ioe=> { var el=ioe.target
var intersectionRatio=ioe.intersectionRatio
console.log(intersectionRatio)
if (intersectionRatio > 0 && intersectionRatio <=1) {
loadImg(el)
}
el.onload=el.onerror=()=> io.unobserve(el)
})
})function checkImg() { var imgs=Array.from(document.querySelectorAll('.my-photo'))
imgs.forEach(item=> io.observe(item))
}function loadImg(el) { if (!el.src) {
el.src=el.dataset.src
}
}
checkImg()效果如下
tml頁面設(shè)置動態(tài)金額滾動效果！
一開始加載頁面，數(shù)字都會過渡滾動到具體數(shù)字上！
代碼：
html:
css:
js:
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
