图片延迟加载原理 - 优化代码,JS代码库,德仔网

代码语言
代码分类
【JS】图片延迟加载原理 - 优化
作者:Rudolph / 发布于2015/8/19/ 490

	<!DOCTYPE html>
	<html>
	<body>
	 <img class="js_lazy_img" src="" original-src="http://img10.360buyimg.com/vclist/jfs/t1333/22/1255709471/22166/7d28db17/55bebf58N3705bdfd.jpg">
	 <img class="js_lazy_img" src="" original-src="http://img10.360buyimg.com/vclist/jfs/t1537/276/1239847519/59657/a129ba62/55c185c5N2b7f4aac.jpg">
	 <img class="js_lazy_img" src="" original-src="http://img10.360buyimg.com/vclist/jfs/t1438/324/1211741014/7644/fcafcc58/55bed1d7N590cf76e.jpg">
	 <img class="js_lazy_img" src="" original-src="http://img10.360buyimg.com/vclist/jfs/t1618/319/1256960674/51977/52a45547/55c180a7N3e689c09.jpg">
	 <img class="js_lazy_img" src="" original-src="http://img10.360buyimg.com/vclist/jfs/t1501/123/1199909390/86105/f2a277b0/55bec1e9Nc0cbd8dc.jpg">
	 <img class="js_lazy_img" src="" original-src="http://img10.360buyimg.com/vclist/jfs/t1606/317/1146455813/23805/7a43c299/55bb47cbN9f424f4d.jpg">
	 <img class="js_lazy_img" src="" original-src="http://c.hiphotos.baidu.com/image/w%3D310/sign=d6381fe02d2eb938ec6d7cf3e56385fe/6d81800a19d8bc3e33ea1acb808ba61ea9d345d4.jpg">
	 <img class="js_lazy_img" src="" original-src="http://f.hiphotos.baidu.com/image/w%3D310/sign=845a4a639a22720e7bcee4fb4bca0a3a/b17eca8065380cd71c8e4deca344ad345982811b.jpg">
	 <img class="js_lazy_img" src="" original-src="http://f.hiphotos.baidu.com/image/w%3D310/sign=1b0f8200b4003af34dbada61052bc619/b8389b504fc2d562a8e9b2e4e51190ef77c66cd1.jpg">
	 <img class="js_lazy_img" src="" original-src="http://c.hiphotos.baidu.com/image/w%3D310/sign=0b4c909e8813632715edc432a18ea056/d52a2834349b033b4126f09817ce36d3d439bdc1.jpg">
	 <img class="js_lazy_img" src="" original-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=b00dcd2a8418367aad8979dc1e738b68/3c6d55fbb2fb43166d7e7a7922a4462309f7d34b.jpg">
	 <img class="js_lazy_img" src="" original-src="http://e.hiphotos.baidu.com/image/w%3D310/sign=5190a6d69b25bc312b5d07996edf8de7/9e3df8dcd100baa1b17434a34510b912c8fc2e49.jpg">
	 <img class="js_lazy_img" src="" original-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=48c3fe384e086e066aa8394a32097b5a/6a63f6246b600c33771ebcc1184c510fd9f9a150.jpg">
	 <img class="js_lazy_img" src="" original-src="http://f.hiphotos.baidu.com/image/w%3D310/sign=558f9131b8a1cd1105b674218912c8b0/ac4bd11373f08202f7fce43e49fbfbedab641b40.jpg">
	 <img class="js_lazy_img" src="" original-src="http://c.hiphotos.baidu.com/image/w%3D310/sign=cd9bc91605082838680dda158898a964/0df3d7ca7bcb0a4618fbe9306963f6246a60afda.jpg">
	 <img class="js_lazy_img" src="" original-src="http://b.hiphotos.baidu.com/image/w%3D310/sign=9855bcc280025aafd33278cacbedab8d/9f2f070828381f30a06277abab014c086e06f0bd.jpg">
	 <img class="js_lazy_img" src="" original-src="http://d.hiphotos.baidu.com/image/w%3D310/sign=427de1de74094b36db921dec93cd7c00/35a85edf8db1cb133a842312df54564e93584bc5.jpg">
	 <img class="js_lazy_img" src="" original-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=f7675c4f7d3e6709be0043fe0bc69fb8/7a899e510fb30f2412464c6bca95d143ac4b03fd.jpg">
	 <img class="js_lazy_img" src="" original-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=3b9ee07c41a98226b8c12d26ba83b97a/f3d3572c11dfa9ec5a49341e60d0f703918fc150.jpg">
	 <img class="js_lazy_img" src="" original-src="http://h.hiphotos.baidu.com/image/w%3D310/sign=5db6ef41938fa0ec7fc7620c1696594a/5ab5c9ea15ce36d3ea5fae4238f33a87e950b16c.jpg">
	 <img class="js_lazy_img" src="" original-src="http://c.hiphotos.baidu.com/image/w%3D310/sign=d6381fe02d2eb938ec6d7cf3e56385fe/6d81800a19d8bc3e33ea1acb808ba61ea9d345d4.jpg">
	 <img class="js_lazy_img" src="" original-src="http://f.hiphotos.baidu.com/image/w%3D310/sign=845a4a639a22720e7bcee4fb4bca0a3a/b17eca8065380cd71c8e4deca344ad345982811b.jpg">
	 <img class="js_lazy_img" src="" original-src="http://f.hiphotos.baidu.com/image/w%3D310/sign=1b0f8200b4003af34dbada61052bc619/b8389b504fc2d562a8e9b2e4e51190ef77c66cd1.jpg">
	
	<script type="text/javascript" src="http://misc.360buyimg.com/??jdf/1.0.0/unit/base/1.0.0/base.js,jdf/lib/jquery-1.6.4.js"></script>
	<script type="text/javascript" >
	(function() {
	 var _images = $('img.js_lazy_img'),
	 _imgCollection = [],
	 _lazyLoad = function(obj) {
	 var _winHeight = $(window).height(),
	 _scrollTop = $(window).scrollTop();
	 try {
	 if ((obj.offset().top < _winHeight + _scrollTop)) {
	 var _img = $('<img>');
	 obj.addClass('readyLoading');
	 _img.attr('src', obj.attr('original-src'));
	 _img.bind('load',
	 function() {
	 obj.attr('src', obj.attr('original-src'));
	 obj.removeClass('js_lazy_img readyLoading');
	 delete _imgCollection[obj.attr('item')];
	 obj.removeAttr('original-src');
	 obj.removeAttr('item');
	 _img = null;
	 });
	 };
	 } catch(e) {}
	 };
	
	 // init;
	 _images.each(function(i) {
	 var _this = $(this);
	 _this.attr('item', i);
	 _this.css({
	 width: '400px',
	 height: '400px'
	 });
	 _this.attr('src', 'https://www.baidu.com/img/bd_logo1.png');
	 _imgCollection.push(_this);
	 _lazyLoad(_this);
	 });
	
	 $(window).bind('scroll',
	 function() {
	 if (_imgCollection.length) {
	 $(_imgCollection).each(function() {
	 var _this = $(this);
	 if (!_this.hasClass('readyLoading')) {
	 _lazyLoad(_this);
	 }
	 });
	 }
	 });
	})();
	</script>
	</body>
	</html>
评论列表
本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
　图片延迟加载　
同语言下
可能有用的
Rudolph贡献的其它代码(2)