文档章节

页面大图片延迟加载

会飞的篮板球
 会飞的篮板球
发布于 2017/08/31 13:28
字数 245
阅读 2
收藏 0
点赞 0
评论 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
移动 Web 开发问题和优化小结

1.前言 到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们...

守候i
2017/09/25
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
ImageLazyLoad-图片随着滚动而进行加载

这个方法可以减少服务器的负担,随着滚动条的滚动加载图片。可以运用在存在大量图片的页面,比如频道页、活动页、搜索结果页等…… 演示: http://kissy.googlecode.com/svn/trunk/src/imgl...

范堡
2010/01/05
3.8K
9
jquery 图片预加载,先模糊后清晰

怎样使用? Lazy Load 依赖于 jQuery. 请将下列代码加入页面 区域: <script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></s......

大师兄
2014/11/16
0
2
js实现网页图片延时加载(加载可见区域)的原理和代码 提高网站打开速度

有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加...

daniel-john
2014/06/21
0
0
JavaScript 延迟加载

本文转载自:http://blog.csdn.net/m13666368773/article/details/7586106 一、延迟加载(lazy loading) 延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需...

learn_more
2015/09/20
267
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud Gateway 接口文档聚合实现

在微服务架构下,通常每个微服务都会使用Swagger来管理我们的接口文档,当微服务越来越多,接口查找管理无形中要浪费我们不少时间,毕竟懒是程序员的美德。 由于swagger2暂时不支持webflux 走...

冷冷gg
37分钟前
16
0
流利阅读笔记30-20180719待学习

1.今日导读 2.带着问题听讲解 3.新闻正文(中英文对照) 4.重点词汇 5.拓展内容

aibinxiao
39分钟前
1
0
OSChina 周五乱弹 —— 我们是食物链的最底层

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @温家成 :分享谢安琪的单曲《姿色份子》 《姿色份子》- 谢安琪 手机党少年们想听歌,请使劲儿戳(这里) @贪吃飒:最近p2p怎么了、半个月爆了...

小小编辑
53分钟前
7
1
Android Studio 3.0 之后打包apk出现应用未安装问题

1、废话 出现这个问题的原因,并不是只有一个,而是有多个原因,不懂的估计会被搞得一头雾水,下面我列举的是我遇到的几种问题和网友遇到的几种问题,但不一定是全部,也有可能有些莫名其妙的...

她叫我小渝
今天
0
0
前端基础

1. get请求传参长度的误区 误区:我们经常说get请求参数的大小存在限制,而post请求的参数大小是无限制的。 实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是...

wenxingjun
今天
0
0
拦截SQLSERVER的SSL加密通道替换传输过程中的用户名密码实现运维审计(一)

工作准备 •一台SQLSERVER 2005/SQLSERVER 2008服务 •SQLSERVER jdbc驱动程序 •Java开发环境eclipse + jdk1.8 •java反编译工具JD-Core 反编译JDBC分析SQLSERVER客户端与服务器通信原理 SQ...

紅顏為君笑
今天
9
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
今天
0
0
linux mint 1.9 qq 安装

转: https://www.jianshu.com/p/cdc3d03c144d 1. 下载 qq 轻聊版,可在百度搜索后下载 QQ7.9Light.exe 2. 去wine的官网(https://wiki.winehq.org/Ubuntu) 安装 wine . 提醒网页可以切换成中...

Canaan_
今天
0
0
PHP后台运行命令并管理运行程序

php后台运行命令并管理后台运行程序 class ProcessModel{ private $pid; private $command; private $resultToFile = ''; public function __construct($cl=false){......

colin_86
今天
1
0
数据结构与算法4

在此程序中,HighArray类中的find()方法用数据项的值作为参数传递,它的返回值决定是否找到此数据项。 insert()方法向数组下一个空位置放置一个新的数据项。一个名为nElems的字段跟踪记录着...

沉迷于编程的小菜菜
今天
1
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部