文档章节

页面大图片延迟加载

会飞的篮板球
 会飞的篮板球
发布于 2017/08/31 13:28
字数 245
阅读 2
收藏 0

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

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

 

本文转载自:http://www.cnblogs.com/tinyphp/archive/2013/04/09/3009385.html

共有 人打赏支持
会飞的篮板球
粉丝 0
博文 9
码字总数 3178
作品 0
私信 提问
延迟加载图片的 jQuery Lazy Load插件

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正...

alex.wu
2012/08/06
0
1
jQuery实现图片延迟加载

在浏览有些网站时,发现图片是在下拉滚动条时才加载,这是一个很不错的用户体验。这一效果是通过JavaScript 编写的 jQuery 插件实现的,它可以延迟加载长页面中的图片. 在浏览器可视区域外的图...

Yamazaki
2012/06/13
0
0
Lazy Load, 延迟加载图片的 jQuery 插件

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正...

xiaoxin
2014/07/09
0
0
jQuery.lazyload详解

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script src="http://file.ithome.com/js/jquery.lazyload.js"></script>   jQuery实现图片延迟加载,不知道是......

地球家园
2014/03/05
0
0
图片懒加载imglazylod之jquery.lazy.load.js的使用说明介绍及在移动端的兼容

首先申明,jQueryLazyLoad在手机上是存在兼容性问题的 而且官网下载的jqueryLazyLoad.js还没有效果,这里我从一个博客里面找了另一个js文件 https://raw.githubusercontent.com/tuupola/jque...

邪气小生
2015/12/22
308
0

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
3
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部