如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）写一个函数 isVisible实现
页面的高度
元素距离顶部的垂直距离
滚轮滚动的距离
-
窗口高度 + 垂直滚动距离 = 元素垂直方向距离(元素处于窗口高度外)-
窗口高度 + 垂直滚动距离 > 元素垂直方向距离元素开始出现 -
垂直滚动距离 > 元素垂直方向距离元素开始消失 -
垂直滚动距离 > 元素垂直方向距离 + 元素自身高度元素消失完毕
-
滚轮向下滚动的距离 == 元素上升的距离
function isVisible($node){
// 滚动的高度
var scrollTop = $(window).scrollTop()
//视窗的高度
var windowHeight = $(window).height()
// 图片距离顶部的垂直距离
var offsetTop = $node.offset().top
//如果元素距顶部的距离 小于 滚动距离+Window高度 并且 高度小于滚动
if (offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
//出现在视野里
return true
}
return false
}
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
//上面代码
$(window).on('scroll',function result(){
if( isVisible($node) ){
console.log(true);
}
})
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
//第一个代码配合
var hadshow = false;
$(window).on('scroll',function(e){
var $ct = $('.show');
if(!hadshow && isVisiblie($ct) ){
console.log(true);
hadshow = true;
}
})
图片懒加载的原理是什么？
图片还没进入可视范围内之前，img标签的src属性为空，进入可视范围之后再把src属性修改为实际的图片地址，可以避免网页同时加载大量图片出现卡顿情况。
实现视频中的图片懒加载效果
<script>
//先判断,图片不会出现空白
lazyRender()
var clock
$(window).on("scroll",function(){
//函数节流
if (clock) {
clearTimeout(clock)
}
clock = setTimeout(function(){
lazyRender()
console.log("hello")
},300)
})
function lazyRender(){
$(".layout li>a>img").each(function(){
// 判断是否已经出现在视野并且没有加载
if (checkShow($(this)) && !isLoaded($(this))) {
// 加载它
loadImg($(this))
}
})
}
// //滚动事件
// $(window).on("scroll",function(){
// // 遍历img
// $(".layout li>a>img").each(function(){
// // 判断是否已经出现在视野并且没有加载
// if (checkShow($(this)) && !isLoaded($(this))) {
// // 加载它
// loadImg($(this))
// }
// })
// })
//取名动宾结构
function checkShow($img){
// 滚动的高度
var scrollTop = $(window).scrollTop()
//视窗的高度
var windowHeight = $(window).height()
// 图片距离顶部的垂直距离
var offsetTop = $img.offset().top
//如果图片距顶部的距离 小于 滚动距离+Window高度 并且 高度小于滚动
if (offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
//出现在视野里
return true
}
return false
}
//是否加载
function isLoaded($img){
return $img.attr("data-src") === $img.attr("src")
}
function loadImg($img){
$img.attr("src",$img.attr("data-src"))
}
</script>
