如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible
实现
function isVisible($node){
var scrolltop= $(window).scrollTop()
var windowheight= $(window).height()
var offsetTop= $img.offset().top
if( offsetTop< scrolltop+windowheight && offsetTop> scrolltop){
return true;
}
return false;
}
当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。
调用上面的函数
$(window).on('scroll',function(){
console.log(isVisible($('node')))
})
窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。
$(window).on('scroll',function(){
if(isVisible($('node')) && !$('node').data('loaded')){
console.log(true)
$('node').data('loaded',true)
}
})
4:图片懒加载的原理是什么?
为提高性能,使用户上网体验、速度更佳
当访问一个页面时,用户未需求的图片不予以加载,(将img元素src替换成一个空白占位图的路径,只需要发送一条网络请求,接下来就可以在浏览器缓存中找到,),当图片出现在浏览器的可视区域内, 才进行加载, 设置图片真正的路径
简单说就是 不需要时不加载,用时再加载
网友评论