懒加载
如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop + $node.height() > scrollTop ){
return true
}
return false
}
console.log(isVisible($('.test')))
测试
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
<script>
$(window).on('scroll', function () {
if (isVisible($node)) {
console.log(true)
}
})
var $node = $('.test')
function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop + $node.height() > scrollTop ){
return true
}
return false
}
</script>
测试
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
<script>
var isEleVisible = false
$(function () {
$(window).scroll(function () {
if (isVisible($node) && !isEleVisible) {
console.log(true)
isEleVisible = true
}
})
})
var $node = $('.test')
function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop + $node.height() > scrollTop ){
return true
}
return false
}
// console.log(isVisible($node))
</script>
测试
图片懒加载的原理是什么？
- 懒加载应用场景
- 懒加载即延迟，对于图片过多的页面，为了加快页面加载速度，我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样一来页面加载性能大幅提升，提高了用户体验
- 实现原理：
- 在页面载入时将img标签內的src指向一个小图片，即占位图，将真实地址存放于一个自定义属性data-src中，然后获取页面上的img标签并保存，开启一个定时器来遍历保存的img标签，接下来判断每个img是否出现在可视区，当某个img出现在了可视区域，就将真实地址赋值给该img的src并将该img从数组中删除以避免重复判断。
- 我们需要判断元素是否出现在了可视区，以上第一题我做了详细解释，这里不重复说
- 实现流程：
当网页滚动事件被触发➡️执行加载图片操作➡️判断图片是否在可视区且是否已经加载过➡️在可视区且未被加载过则动态地将data-src的值赋给该图片的src属性
实现视频中的图片懒加载效果
预览
