-
題目1：如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）瓷马。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)
function isVisible($node){
var winH = $(window).height(),
offsetH = $e.offset().top,
scrollH = $(window).scrollTop()
if ((offsetH > scrollH) && (offsetH < scrollH + winH)) {
return true
}
return false
}
* 題目2：當(dāng)窗口滾動(dòng)時(shí)拴还，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 欧聘。用代碼實(shí)現(xiàn)
<p class="ppp">文字文字文字</p>
<script>
var $e = $(".ppp");
$(window).on("scroll",function(){
isVisible($e)
});
function isVisible($e){
var winHeight = $(window).height(),
WinTop = $(window).scrollTop(),
offsetTop = $e.offset().top
if(offsetTop < winHeight+WinTop){
console.log("位于可視區(qū)域內(nèi)")
return true
}else{
return false
}
}
</script>
* 題目3：當(dāng)窗口滾動(dòng)時(shí)片林，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true怀骤，以后再次出現(xiàn)不做任何處理费封。用代碼實(shí)現(xiàn)
<p class="ppp">文字文字文字</p>
<script>
var $e = $(".ppp");
var flag = true;
function isVisible($e){
var winHeight = $(window).height(),
WinTop = $(window).scrollTop(),
offsetTop = $e.offset().top
if(offsetTop < winHeight+WinTop){
return true
}else{
return false
}
}
$(window).on("scroll",function(){
//isVisible($e)
if (isVisible($e) && flag) {
console.log('true');
flag = false;
}
});
</script>
* 題目4： 圖片懶加載的原理是什么？
答：
圖片懶加載也稱為曝光加載晒喷，將頁面上的圖片分批加載孝偎，只有當(dāng)圖片出現(xiàn)在window窗口中（用戶可見）的時(shí)候，才加載圖片凉敲；而正常情況下衣盾，img元素是自動(dòng)加載的寺旺，所以可以自定義一個(gè)圖片地址屬性，當(dāng)需要加載圖片的時(shí)候势决，將該自定義屬性值賦給src屬性阻塑，以實(shí)現(xiàn)優(yōu)化頁面的渲染速度，圖片延遲加載果复。
* 題目5： 實(shí)現(xiàn)視頻中的圖片懶加載效果
[在線預(yù)覽](http://book.jirengu.com/jirengu-inc/jrg-renwu7/members/%E6%96%BD%E4%B8%9C%E7%85%8C/%E8%BF%9B%E9%98%B616/16-5.html)
* 題目6： 實(shí)現(xiàn)視頻中的新聞懶加載效果
[本地測(cè)試無問題](http://book.jirengu.com/jirengu-inc/jrg-renwu7/members/%E6%96%BD%E4%B8%9C%E7%85%8C/%E8%BF%9B%E9%98%B616/16-6.html)
