- 如何判斷一個元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個函數(shù) isVisible實現(xiàn)
function isVisible($node){
var curHigh = $node.offset().top,
winTop = $(window).scrollTop(),
winHigh = $(window).height();
if(winTop + winHigh > curHigh && winTop < curHigh){
return true;
}else{
return false;
}
} - 當窗口滾動時,判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)
$(window).on('scroll',function(){
if(isVisible($node)){
console.log('true')
}
})
代碼預覽 - 當窗口滾動時,判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true,以后再次出現(xiàn)不做任何處理。用代碼實現(xiàn)
$(window).on('scroll',function(){
if($('.green').data('condition')){return}
if(isVisible($node)){
console.log('true');
$node.data('condition','true');
}
});
代碼預覽 - 圖片懶加載的原理是什么?
- 懶加載即曝光加載,當圖片曝光在你眼前的時候再去加載。
如果網(wǎng)頁中有較多圖片,為優(yōu)化渲染速度,圖片可以先使用一張占位圖片顯示,真實的圖片地址保存在一個自定義的屬性當中,當圖片出現(xiàn)在窗口的可是范圍的時候,才將真實的地址替換掉占位圖片的地址
- 懶加載即曝光加載,當圖片曝光在你眼前的時候再去加載。
jquery懶加載、回到頂部
最后編輯于 :
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
相關閱讀更多精彩內(nèi)容
- 如何判斷一個元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個函數(shù) isVisible實現(xiàn)...
- Q&A: 1. 如何判斷一個元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個函數(shù) isV...
- 問答 1、如何判斷一個元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個函數(shù)isVisib...
- 問答 1. 如何判斷一個元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個函數(shù) isVis...
- 思考 1、如果窗口resize了2、如果節(jié)點加入重復了3、怎樣判斷元素是在視窗范圍內(nèi)* 1、如何判斷一個元素是否出...