图片延迟加载代码,JS代码库,德仔网

代码语言
代码分类
【JS】图片延迟加载
作者:shanxi_liyong / 发布于2015/8/10/ 805

	<!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://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">
	
	
	<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">
	$(document).ready(function(){
	 var images = $('img.js_lazy_img');
	 // init
	 images.each(function(){
	 var _this = $(this),
	 img = $('<img>');
	 img.attr('scr', _this.attr('original-src'));
	 img = null;
	
	 _this.css({width:'400px', height:'400px'});
	 _this.attr('src','js5-01.jpg');
	 lazyLoad(_this);
	 });
	
	 $(window).bind('scroll', function(){
	 var images = $('img.js_lazy_img');
	 if(images.length){
	 images.each(function(){
	 var _this = $(this);
	 lazyLoad(_this);
	 })
	 }
	 });
	
	 function lazyLoad(obj){
	 obj.bind('load', function(e){
	 obj.addClass('loaded');
	 common(obj);
	 });
	 common(obj);
	 }
	 function common(obj){
	 var
	 _winHeight = $(window).height(),
	 _scrollTop = $(window).scrollTop();
	 if(obj.offset().top < _winHeight + _scrollTop && obj.hasClass('loaded')){
	 setTimeout(function(){
	 obj.attr('src', obj.attr('original-src'));
	 obj.removeAttr('original-src');
	 },250);
	 obj.removeClass('js_lazy_img');
	 obj.removeClass('loaded');
	 }
	 }
	});
	</script>
	</body>
	</html>
试试其它关键字
　图片　　延迟加载　
同语言下
可能有用的
shanxi_liyong贡献的其它代码(10)