文档章节

页面大图片延迟加载

会飞的篮板球
 会飞的篮板球
发布于 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
图像延迟加载 && 列表图顺序加载

图片延时加载十分重要,尤其是对于移动端用户。 从理论上来看,图像延迟加载机制十分简单,但实际上却有很多需要注意的细节。 此外,有多个不同的用例均受益于延迟加载。 首先,我们来了解一...

文叔叔
05/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

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
5
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
5
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
8
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部