页面大图片延迟加载

最新推荐文章于 2024-09-05 11:49:00 发布

chuiqian7404

最新推荐文章于 2024-09-05 11:49:00 发布

阅读量119

点赞数

文章标签： xhtml javascript 大数据 ViewUI

原文链接：https://my.oschina.net/u/3488264/blog/1526873

版权

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

使用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>

转载于:https://my.oschina.net/u/3488264/blog/1526873

chuiqian7404

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面大图片延迟加载

在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，使用jQuery插件jquery.lazyload.js jquery.lazyload.js的说明： http://www.appelsiini.net/projects/lazyload 下...
复制链接

扫一扫