页面大图片延迟加载
页面大图片延迟加载
会飞的篮板球 发表于8个月前
页面大图片延迟加载
  • 发表于 8个月前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,

使用jQuery插件jquery.lazyload.js

jquery.lazyload.js的说明:
http://www.appelsiini.net/projects/lazyload
下载地址:
原版的:https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js
缩减版的:https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片加载技术实例</title>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
  $(function() {			
	  $("img").each(function(){
		var srcUrl = $(this).attr("src");
		//$(this).attr({asd:"adadasdas"});
		$(this).attr("data-original",srcUrl);
		$(this).attr("src","images/loading.png");			
	  });
	
	  //$("img").lazyload();
	  
	  $("img").lazyload({
			 placeholder : "<span class="Apple-style-span" 
				style="font-family:'sans serif', tahoma, verdana, 
				helvetica;line-height:19px;white-space:normal;
				font-size:13px;">http://www.173it.cn/css/grey.gif", //加载图片前的占位图片
			 effect      : "fadeIn" //加载图片使用的效果(淡入)
		});

  });
</script>
</head>
<body>

<img src="images/map.jpg" />

</body>
</html>

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 4
码字总数 3024
×
会飞的篮板球
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: