- 如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
$.fn.isVisible = function(){
var nodeT = $(this).offset().top,
screenH = $(window).height(),
scrollT = $(document).scrollTop()
if(nodeT > scrollT&&nodeT<screenH+scrollT){
return true
}
return false
}
- 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
代码效果预览
$(document).on('scroll',function(){
var $target = $('.box-target')
if($target.isVisible()) {
console.log(true)
}
})
- 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
代码效果预览
function isLoad($target) {
if (!$target.data('isLoad')) {
console.log(true)
$target.data('isLoad',true)
}
}
$(document).on('scroll',function(){
var $target = $('.box-target')
if($target.isVisible()) {
isLoad($target)
}
})
- 图片懒加载的原理是什么
- 图片懒加载实际上是叫图片的延迟加载
- 目的是为了优化页面的渲染速度,出现在用户可视范围内的图片才加载
- 实现原理
图片可以先使用一张占位图片显示,真实的图片地址保存在一个自定义的属性当中,当图片出现在窗口的可是范围的时候,就将真实的地址替换掉占位图片的地址
