关于lazyload图片延迟加载简单介绍
LazyLoad大家再熟悉不过的一个jquery插件了,它可以延迟加载长页面中的图片. 也就是说在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才会加载并显示出来,这和图片预加载的处理方式正好刚好相反。图片不多的页面时,效果并不太明显,但是当页面大图片比较多的时候,这种效果就比较显著了,明显加快了页面的加载速度。浏览器将会在加载可见图片之后即进入就绪状态,在某些情况下还可以帮助降低服务器负担。
因此,比较流行的wordpress主题,typecho主题,emlog主题等都使用了lazyload图片延迟加载来实现快速加载页面。
当然啦,你的网站纯文字的,就没必要多搞个jquery插件了。
怎样使用lazyload?
其实很简单,只需在你所使用头部<head></head>
标签中插入下面一段代码即可,你也可以添加到footer中。
1 |
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script> |
以我的hexo网站和现在使用的next主题举例子,我是习惯把js添加到底部的,找到_layout.swig
,路径在your-hexo-site\themes\next\layout
,把前面的代码添加到</body>
标签前面就OK了。
如果你是hexo其他主题的,找到footer.ejs文件,一般是在themes/你的主题/layout/_partial/
路径下,把上述的代码添加进去就行了。
若是使用了wordpress,typecho,emlog等其他博客后台的,也差不多这样改,往你的主题模板</head>
或者</body>
前上述代码即可,我的typecho网站也是这样实现图片延迟加载的。
如果你希望没看到图片前先加载200px,可以通过设置阀值来控制,具体实现:
1 |
jQuery("img").lazyload({ threshold : 200 }); |
上面代码比较通用,基本满足你的网站图片延迟加载需求。
值得一提的是:
- lazyload依赖jquery,如果你的站点没引用juery,请先引入jquery。
- 在上述代码中,
img
是延迟加载所有图片,这里你可以根据不同模板作相应改动。比如我现在使用的next主题,可以改成#posts img
,这样更改后,只延迟加载#posts
容器内的图片,否则主题侧边的头像和协议图片也跟着延迟加载,等最后才加载出来。所以和我一样使用next主题的最后把jQuery("img")
改成jQuery("#posts img")
。使用其他模板的根据不同模板实际显示效果自行更改详细例子
<!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>图片加载技术实例-欢迎关注tinyphp的博客</title>
<SCRIPT src="jquery.js" type=text/javascript></SCRIPT>
<SCRIPT src="jquery.lazyload.js" type=text/javascript></SCRIPT>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({
placeholder : "images/loading.gif",
effect: "fadeIn"
});
});
</script>
<style>
img a,img{border:0px;}
div{ margin-bottom:10px;}
</style>
</head>
<body>
<img src="data:images/0.jpg" /><br />
<div><a href="#"><img src="data:images/loading.gif" data-original="images/1.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/2.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/3.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/4.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/5.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/6.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/7.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/8.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/9.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/10.jpg"></a></div>
</body>
</html>
关于lazyload图片延迟加载简单介绍的更多相关文章
- JQuery.lazyload 图片延迟加载
1.引入 jquery.lazyload.js 2. 延时加载的方式 <script type="text/javascript"> $(function() { ...
- BMP、GIF、JPEG、PNG以及其它图片格式简单介绍
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/songjinshi/article/details/37516649 BMP格式 BMP是英文Bit ...
- lazyload 图片延迟加载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery前端插件以及图片延迟加载
插件名称 用途 插件官网地址 fontawsome CSS图标插件 http://fontawesome.io easyui 基于jQuery的用户界面插件集合 http://www.jeasyui. ...
- JQuery LazyLoad实现图片延迟加载-探究
对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- jquery.lazyload.js图片延迟加载
转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下 ...
- jquery.lazyload.js 图片延迟加载
当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的 使用方法也非常简单. 1.在网页任何位置(一般是在</body>前面)加上如下代码(注意<script&g ...
- 前端优化之图片延迟加载(lazyload.js)
要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...
随机推荐
- UVa 11582 巨大的斐波那契数!(幂取模)
https://vjudge.net/problem/UVA-11582 题意: 输入两个非负整数a.b和正整数n,你的任务是计算f(a^b)除以n的余数.f[0]=0,f[1]=1,f[i+2]=f ...
- BZOJ 2342: 【SHOI2011】 双倍回文
题目链接:双倍回文 回文自动机第二题.构出回文自动机,那么一个回文串是一个“双倍回文”,当且仅当代表这个串的节点\(u\)顺着\(fail\)指针往上跳,可以找到一个节点\(x\)满足\(2len_x ...
- hdu 1004 Let the Balloon Rise strcmp、map、trie树
Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- Message: dlopen failed for module ‘x’: file not found
这是未安装bochs-x的缘故 解决方案: sudo apt-get install bochs以后接着安装bochs-x. sudo apt-get install bochs-x 2.bx_dbg ...
- Java回顾之一些基础概念
类的初始化顺序 在Java中,类里面可能包含:静态变量,静态初始化块,成员变量,初始化块,构造函数.在类之间可能存在着继承关系,那么当我们实例化一个对象时,上述各部分的加载顺序是怎样的? 首先来看代码 ...
- Linux删除(清空)正在运行的应用日志文件内容 及 查看服务器剩余空间
在测试环境定位问题时,如果发现日志文件内容太多或太大,有时需要删除该日志,如Tomcat,Nginx日志.以前每次都是先rm -rf ***.log,然后重启应用.直到后来发现了以下命令,原来可以不用 ...
- npm安装vue详细教程(图片详解)
npm安装vue详细教程(图片详解) 一.总结 一句话总结:整个安装流程照着教程来,注意系统环境变量的配置,注意一下npm的本地仓库和缓存位置 教程 系统环境变量 仓库 缓存 1.什么情况下最适合用n ...
- JSP 文件上传
JSP 文件上传 JSP可以通过HTML的form表单上传文件到服务器. 文件类型可以是文本文件.二进制文件.图像文件等其他任何文档. 创建文件上传表单 接下来我们使用HTML标签来创建文件上传表单, ...
- bzoj1058: [ZJOI2007]报表统计 stl xjbg
小Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工作,作为她的生日礼物之一.经过仔细观察,小Q发现统计一张报表实际上是维护一个可能为负数的整数数列,并且 ...
- 个人知识管理系统Version1.0开发记录(06)
demo view 夜已深,我们先简单演示一下,完成一个小段落了.涉及工具及技术知识:图形处理软件photoshop cs6,js类库ext. 思路如下: 1.下载ps6,有破解版本的,dll文件覆盖 ...