在制作js可视区域加载之前,我们首先必须了解各种高度,我之前的一篇文章javascript的height总结,大家可以看一下,复习一下!
了解了各种高度之后,我们开始我们的js代码吧!
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>haorooms前端博客-可视区域加载之 javascript</title> <style> img{width:100%;margin-bottom: 30px; min-height: 400px; background-color: #ddd;} </style> </head> <body> <img haoroomslazyload="Chrysanthemum.jpg" src="" > <img haoroomslazyload="Desert.jpg" src="" > <img haoroomslazyload="Hydrangeas.jpg" src="" > <img haoroomslazyload="Koala.jpg" src="" > <img haoroomslazyload="Lighthouse.jpg" src="" > <img haoroomslazyload="Penguins.jpg" src="" > <img haoroomslazyload="Tulips.jpg" src="" >
<script>
var imgNum=document.getElementsByTagName('img').length; var imgObj=document.getElementsByTagName("img"); var l=0; window.onscroll=function(){ var seeHeight = document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(var i=l;i<imgNum;i++){ if(imgObj[i].offsetTop < seeHeight + scrollTop){ console.log(imgObj[i].getAttribute("src")); console.log(imgObj[i].src ); if(imgObj[i].getAttribute("src") == ""){ imgObj[i].src = imgObj[i].getAttribute("haoroomslazyload"); } } if(imgObj[i].offsetTop > seeHeight + scrollTop){ l=i; break; } } } </script>
大家注意看我的两个console输出,console.log(imgObj[i].src );获取的是整个浏览器地址!
jquery懒加载之可视区域加载
上面的js用jquery翻译版!
var l=0 //js方法翻译版 $(window).bind("scroll", function(event){ for(var i=l;i<$("img").length;i++){ if($("img").eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())){ if($("img").eq(i).attr("src") == ""){ var lazyloadsrc=$('img').eq(i).attr("haoroomslazyload"); $("img").eq(i).attr("src",lazyloadsrc); } } if($("img").eq(i).offset().top > parseInt($(window).height()) + parseInt($(window).scrollTop())){ l=i; break; } } });
另外一种方法,可以参考我之前写的一个延迟加载的插件:http://www.haorooms.com/post/touchweb_canvas_lazyload
其中是这么写的。
我把这个写法拎了出来,如下:
$(window).bind("scroll", function(event){ $("img").each(function(){ //窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度 var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop()); var thisTop = parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度 var PictureTop = parseInt($(this).offset().top); if (PictureTop >= thisTop && PictureTop <= thisButtomTop && $(this).attr("haoroomslazyload") != $(this).attr("src")) { $(this).attr("src", $(this).attr("haoroomslazyload")); } }); })
可视区域加载延伸
例如一个动画效果,或者一个canvas图片,我想达到的效果是,初始进来不加载,当滚动到这个动画或者图表上面的时候,进行加载,那么我们就可以根据上面的代码进行如下改进:
$(window).bind("scroll", function(event){ //窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度 var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop()); var thisTop = parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度 var PictureTop = parseInt($("你的要滚动加载的ID").offset().top); if (PictureTop >= thisTop && PictureTop <= thisButtomTop) { // $("#你的要滚动加载的ID").attr("src", $("#你的要滚动加载的ID").attr("haoroomslazyload")); //此处可以执行你的加载函数,加载函数由原来的document.ready中,移到这里来! } })