2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

预加载页面图片

网页特效html5javascript图片预加载作者:东邪

       我们在mobile页面开发中,经常遇到一个页面有大量图片的情况,这时候需要消耗用户大量的流量(wifi情况下:grin:),并且加载速度还很慢,这样极大的影响了用户体验。

       这样我们就需要优化页面中的图片,初始化默认不加载图片,根据用户页面在手机屏幕中的展示情况,只加载那些在手机屏幕中看的见的图片。随着页面滑动不断加载渲染新图片,废话不多说,上干活例子:grin:



<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>页面图片预加载</title>
 </head>
 <body>
  <ul>																
		<li >
			<div class="node">
				<div class="img">
					<div class="bg">
						<img class="cover"  data-src="**.jpg">
					</div>
				</div>
			</div>
		</li>
		<li >
			<div class="node">
				<div class="img">
					<div class="bg">
						<img class="cover"  data-src="**.jpg">
					</div>
				</div>
			</div>
		</li>																					
		<li >
			<div class="node">
				<div class="img">
					<div class="bg">
						<img class="cover"  data-src="**.jpg">
					</div>
				</div>
			</div>
		</li>                                        
	</ul>
 </body>
 <script type="text/javascript" src="https://www.mk2048.com/js/jquery-1.11.1.min.js"></script>
 <script type="text/javascript">
 var throttle = function(b, d, h) {
	var a, f, i;
	var g = null ;
	var e = 0;
	if (!h) {
		h = {};
	}
	var c = function() {
		e = h.leading === false ? 0 : Date.now();
		g = null ;
		i = b.apply(a, f);
		if (!g) {
			a = f = null ;
		}
	};
	return function() {
		var j = Date.now();
		if (!e && h.leading === false) {
			e = j;
		}
		var k = d - (j - e);
		a = this;
		f = arguments;
		if (k <= 0 || k > d) {
			if (g) {
				clearTimeout(g);
				g = null ;
			}
			e = j;
			i = b.apply(a, f);
			if (!g) {
				a = f = null ;
			}
		} else {
			if (!g) {
				g = setTimeout(c, k);
			}
		}
		return i;
	};
};		
var AutoLazy = function(attribute) {
	//errimgb64 为图片状态错误时候显示默认图
	var attr = {
		imgs: "data-src",
		time: 100,
		errimgurl: "",
		errimgb64: "data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCADwALQDAREAAhEBAxEB/8QAGQABAQEBAQEAAAAAAAAAAAAAAAECAwQI/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAA+oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQoAAAICgAAAAHU6GDBgAA6HQp5yAAAAA7GwCHIydDoADiYAAAAOhs0AAZNAAHM5kAAAKeghQADJoAAyQ4gAAFPQQoABk0AAZIcQAACnoIUAAyaAAMkOIAABT0EKAAZNAAGSHEAAAp6CFAAMmgADJDiAAAU9BCgAGTQABkhxAAAKegyAaAMmgQgBDiAAAU9BkyCFNGTRgFKaMnEAAAAAAAEKACFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB//EAC4QAAIAAggFAwQDAAAAAAAAAAECAHEDESAyM4GxwRASITBBUVKREzFhcCJCcv/aAAgBAQABPwD9ekgRzD1HZJAjmHqO5QqOXm88DRofFUoNEwumuceaj0NhQWujPxC0PuJMukKqrdAHBwFcgdBV26HDFgqGFREGiIunIwEckjp0haIC9/LSzS4mXaSi8v8AEUd3M62kvPPYWigd2r9BvDKUPXqPB7CYiz2PBLuZ1tJeeewtDEaQ3imwzlr2ExFnseCXczraS889haGI0hvFNhnLXsJiLPY8Eu5nW0l557C0MRpDeKbDOWvYTEWex4JdzOtpLzz2FoYjSG8U2GctewmIs9jwS7mdbSXnnsLQxGkN4psM5a9hMRZ7Hgl3M62kvPPYWhiNIbxTYZy17CYiz2PABh9qiIrbyvwY5x5rE4Br4peeew4lgPuQI5/QMcorbwvyYUGskxTYZy17CYiz2PA0iD+0fWXwGMfWHtaOej8ggyO0Bva4P4Mc3uBEK61v187QWMh6tHOvlyf8wKRFuqY+sPa0ClT8jKFYNdIMU2GctexI1EQa2vEm0On2JEjHX3N8xULNUVkiosSP2p//xAAUEQEAAAAAAAAAAAAAAAAAAACQ/9oACAECAQE/ACy//8QAFBEBAAAAAAAAAAAAAAAAAAAAkP/aAAgBAwEBPwAsv//Z"
	};
	var that = this;
	for (var f in attribute) {
		attr[f] = attribute[f];
	}
	function getImages() {
		attr.$imgs = $("img[" + attr.imgs + "]").not("img[data-lazy=y]");
		attr.imgsSize = attr.$imgs.size();
	}
	//加载图片
	function loadSrc(imageElement) {
		var image = new Image();
		image.src = imageElement.attr(attr.imgs);
		image.onload = function() {
			imageElement.css("opacity", 1).attr("src", this.src);
			imageElement.attr("ready","true");
		};
		image.onerror = function() {
			image.src = imageElement.attr(attr.imgs);
			image.onload = function() {
			   imageElement.css("opacity", 1).attr("src", this.src);
			   imageElement.attr("ready","true");
			};
			image.onerror = function() {
			   imageElement.css("opacity", 1).attr("src", attr.errimgb64);
			};
		};
	}
	function scrollLeft() {
		return $(window).scrollLeft();
	}
	function scrollTop() {
		return $(window).scrollTop();
	}
	//判断位置
	function judgePos(scrollWidth, innerWidth, offsetWidth) {
		if (scrollWidth <= offsetWidth && offsetWidth <= scrollWidth + innerWidth) {
			return true;
		} else {
			return false;
		}
	}
	function isDisplay(imgEle) {
		if (imgEle.css("display") == "none") {
			return false;
		} else {
			return true;
		}	        
	}
	//判断滑动位置,是否进行渲染新的图片
	function judge() {
		var scroll_left = scrollLeft();
		var scroll_top = scrollTop();
		for (var p = 0; p < attr.imgsSize; p++) {
			var imgEle = attr.$imgs.eq(p);
			if (imgEle.attr("data-lazy") == "y" || !isDisplay(imgEle)) {
				continue;
			}
			var newInnerHeight =window.innerHeight+400;	//将屏幕高度增加300px,提前加载更多图片
			if (judgePos(scroll_left, window.innerWidth, Math.abs(imgEle.offset().left)) && judgePos(scroll_top, newInnerHeight, Math.abs(imgEle.offset().top))) {
				imgEle.attr("data-lazy", "y");
				loadSrc(imgEle);
			}
		}
	}
	this.pause = false;
	this.load = function(i) {
		if (that.pause) {
			return;
		}
		if (i == "1") {
			getImages();
		}
		if (attr.imgsSize < 1) {
			return;
		}
		judge();
	};
	function init() {
		getImages();
		$(document).on("scroll", throttle(that.load, attr.time));
	}
	init();
};	

var autolazy = new AutoLazy();
$(function() {
	autolazy.load();
});
 </script>
</html>



希望这能对你有所帮助,原创于猿2048

« 上一篇:十年前端码农之前端开发框架经验总结
» 下一篇:JavaScript动画之转呀转
评论
点击刷新
评论
相关博文
×添加代码片段