1.判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間歹垫，肉眼可視）
var $div= $('.b')
function isVisible($div) {
var scrollTop = $(window).scrollTop() //頁面滾動高度
var windowHeight = $(window).height() //窗口高度
var offsetTop = $div.offset().top //$div位于頁面的高度
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
return true
}
return false
}
懶加載.png
2.當窗口滾動時娶耍，判斷一個元素是不是出現(xiàn)在窗口可視范圍嬉探。每次出現(xiàn)都在控制臺打印 true 擦耀。
$(window).on('scroll', function(){
if (isVisible($div)) {
console.log(true)
}
})
var $div= $('.b')
function isVisible($div) {
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $div.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
return true
}
return false
}
3.當窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍涩堤。在元素第一次出現(xiàn)時在控制臺打印 true眷蜓，以后再次出現(xiàn)不做任何處理。用代碼實現(xiàn)
var clock //默認為
$(window).on('scroll', function () {
if (clock) {
return
} else if (isVisible($div)) {
console.log(true)
clock = true
}
})
var $div= $('.b')
function isVisible($div) {
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $div.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
return true
}
return false
}
4. 圖片懶加載的原理是什么胎围？
- 對于所有的 img 標簽吁系，把真實的地址放入自定義屬性data-img
- 當滾動頁面時德召，檢查頁面所有的 img 標簽，看看這個標簽是否出現(xiàn)到我們的視野汽纤，當出現(xiàn)在我們的視野時上岗，再去判斷它是否已經(jīng)加載過，如果沒有加載過蕴坪，令img的src等于data-src肴掷，( $img.attr('src', $img.attr('data-src')))
