图片懒加载

最新推荐文章于 2021-03-08 11:19:53 发布

LzwGlory

最新推荐文章于 2021-03-08 11:19:53 发布

阅读量754

点赞数

分类专栏：图片懒加载文章标签：图片懒加载

图片懒加载专栏收录该内容

2 篇文章 0 订阅

订阅专栏

    Java代码   
    
 图片懒加载，首屏（目测浏览器最大化窗口时的可见范围）可见区域以外的所有图片使用懒加载，即在滚动页面的时候才自动获取图片，实现方法为采用修改img标签的src属性为src3或src4，阻止图片的加载。

    Javascript代码   
    
  
 <html>  
 <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>  
 <script type="text/javascript" src="./common_lazyload.js"></script>  
 <body id="index">  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>     
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>     
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>     
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>     
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>     
 <img src3="./gw.jpg"/><p>  
 <img src3="./gw.jpg"/><p>     
 </body>  
 </html>  

common_lazyload.js

//懒加载
function lazyload(option) {
	var settings = {
		defObj : null,
		defHeight : 0
	};
	settings = $.extend(settings, option || {});
	var defObj = (typeof settings.defObj == "object")? settings.defObj.find("img"): $(settings.defObj).find("img");
	var pageTop = function() {
		var d = document, y = (navigator.userAgent.toLowerCase().match(/iPad/i) == "ipad")? window.pageYOffset: Math.max(d.documentElement.scrollTop, d.body.scrollTop);
		return d.documentElement.clientHeight + y - settings.defHeight;
	};
	var imgLoad = function() {
		defObj.each(function() {
			if ($(this).offset().top <= pageTop()) {
				var src3 = $(this).attr("src3");
				if (src3) {
					$(this).attr("src", src3).removeAttr("src3");
				}
			}
		});
	};
	imgLoad();
	$(window).bind("scroll", function() {
		imgLoad();
	});
}
$(document).ready(function() {
//懒加载
lazyload({defObj : "#index"});	
});

转载于：http://dengli19881102.iteye.com/blog/1756528