懒加载
如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var windowHeight = $(window).height(),//窗口的高度
scrollTop = $(window).scrollTop(),//滚动距离顶点的距离
offsetTop = $node.offset().top,//传递的参数距离顶点的距离
nodeHeight = $node.height();
//节点的自身高度if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){
return true;
}else{
return false;
}
}
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
hello
$(window).on('scroll',function(){
if(isVisible($('#hello'))){
console.log(true)
}
}) function isVisible($node){
var windowHeight = $(window).height(),//窗口的高度
scrollTop = $(window).scrollTop(),//滚动距离顶点的距离
offsetTop = $node.offset().top,//传递的参数距离顶点的距离
nodeHeight = $node.height();
//节点的自身高度if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){
return true;
}else{
return false;
}
}
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
【懒加载】hello
$(window).on('scroll',function(){
if(isVisible($('#hello')) && !$('#hello').hasClass('show')){
$('#hello').addClass('show')//当出现过一次后加个标签
console.log(true)
}
}) function isVisible($node){
var windowHeight = $(window).height(),//窗口的高度
scrollTop = $(window).scrollTop(),//滚动距离顶点的距离
offsetTop = $node.offset().top,//传递的参数距离顶点的距离
nodeHeight = $node.height();
//节点的自身高度if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){
return true;
}else{
return false;
}
}
图片懒加载的原理是什么？ 对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。
实现原理：
- 当窗口滚动时
- 判断图片是否出现在可视区域
- 若出现了就展示图片，并把展示的图片加上标记以防之后重复判断
新闻懒加载效果
推荐阅读
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 如何寻找情感问答App的分析切入点
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus使用queryWrapper如何实现复杂查询
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- java中如何实现重建二叉树
- Linux下面如何查看tomcat已经使用多少线程
- thinkphp|thinkphp 3.2 如何调用第三方类库
- 2019女表什么牌子好（如何挑选女士手表？）