如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来。通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度。
Lazy Load 插件原理
修改目标img元素的src属性为orginal属性,从而中断图片的加载。检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果。代码引入方法:
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(document).ready(
function($){
$("img").lazyload({
placeholder : "images/grey.gif", //加载图片前的占位图片
effect : "fadeIn" //加载图片使用的效果(淡入)
});
});
</script>
但是现在,很多Javascript大牛分析得出,这个插件其实并没有真正的起到缓加载的作用。确实是这样,官方也已经给出了说明和解决方法了。
其实原因就在于在新版的浏览器中,即使我们删除了Javascript控制的src属性,浏览器仍然会去加载这个图像。
那么我们该怎么解决呢?其实也很简单,需要直接修改HTML的结构,在img标签中添加新的属性,把src属性的值指向占位图片,添加data-original属性,让其指向真正的图像地址。比如:
<img src="img/grey.gif" data-original="img/example.jpg" >
当然,在上面的代码中我们把页面内的所有图片都延迟加载了,但有些时候我们并不希望这样,因为有些图片并不想然他们延迟加载,那么我们可以这样只需做:
如只缓冲加载类main下的图像
$(".main img").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});
加载挂载有lazy类的图像:
$("img.lazy").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});
其他的以此类推,适当做一下选择器调整就行了。
lazyload.js 高级使用方法:
下面部分来自官方文档,将官方文档进行了一下简单的翻译。
更周全的做法
我们不得不思考这样一个问题。我们定义了这样一个结构,那么网页中,就不会加载源图像了。只有当 Javascript 执行,才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持 Javascript 的选项,那么我们的这个图像就无法显示出来。也就是说,如果没有 Javascript 的支持,我们的图像就无法显示出来。
应对这个问题,我们需要引入noscript 标签。大体思路如下:用 noscript 包含真实的图像位置,当浏览器不支持 Javascript,直接显示图像。
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
对现有图像,隐藏处理,使用 show()方法触发显示。
.lazy {
display: none;
}
这样,如果浏览器不支持 Javascript,我们自定义的 img 就不会出现,而显示 noscript 里面的图像。具体实现代码如下:
$("img.lazy").show().lazyload();
提前加载
默认的情况是,当你滚动到图片位置的时候,插件开始加载。这样,用户可能首先看到的是一个空白图像,然后再缓慢出现。如果你想在用户滚动之前,提前加载这个图像,你可以配置一下参数。
$("img.lazy").lazyload({
threshold : 200
});
threshold 这个参数,就是用来提前加载的。上面这个语句的意思是,当距离图片还有200像素的时候,就开始加载图片。
自定义触发事件
默认的触发事件,是滚动,当你滚动的时候,就会检查然后加载。你可以使用event属性,设置你自己的加载事件,之后你可以自定义触发这个事件的条件,然后去加载图像。
$("img.lazy").lazyload({
event : "click"
});
自定义显示效果
默认的图片实现效果,就是没有效果,下载完成之后,直接显示出来。这样的用户体验并不好,你可以设置effect属性,来控制显示图片的效果。例如
$("img.lazy").lazyload({
effect : "fadeIn"
});
fadeIn的效果就是,改变图片的透明度,渐现的方式出现。
把图像插入某个容器
大家如果使用智能手机的话,经常去应用网站下载应用,他们通常使用一个横着的容器,放一些手机截图。使用container属性,能很轻松在容器中实现缓冲加载。首先,我们需要用css定义这个容器,然后用这个插件进行加载。
#container { height: 600px; overflow: scroll; }
$("img.lazy").lazyload({
container: $("#container")
});
加载不可见图像
有部分图像是不可见的,我们对其加上类似 display:none;等属性的图像。默认的情况下,这个插件是不会加载隐藏的不可见图像。如果我们需要用它加载不可见图像,我们需要将 skip_invisible设置为false,代码如下:
$("img.lazy").lazyload({
skip_invisible : false
});
好了,这就是lazyload.js这款插件的简单介绍了。
-------
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/lazyload.js"></script>
<script type="text/javascript">
$(function () {
$("img").lazyload();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center">
<tr>
<th>图片
</th>
</tr>
<asp:Repeater ID="rpt" runat="server">
<ItemTemplate>
<tr>
<td>
<img src="/Content/images/grey.gif" original="http://192.168.1.102/image/<%#Eval("rul") %>" onerror="this.src='/Content/images/grey.gif';" />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
</form>
</body>
</html>
相关推荐
lazyload.js实现图片异步延迟加载
NULL 博文链接:https://angrycoder.iteye.com/blog/1711155
magento lazylaod插件可以使图片异步加载 减少页面的请求次数加快页面速度
/** * @author fed * 老外写的一个图片异步加载类,学习一下,应该可以改到任何适配器BaseAdapyer上去。 * 记得添加权限,访问internet,写外部存储器(sd卡等) * */
使用interSectionObserver API异步加载图片 当前懒加载图片的方法 要想知道当前是否需要加载一张图片,我们需要坚持当前页面可见范围内这张图片是否可见。如果是,则加载。 检查方法:我们可以通过事件和事件处理器...
图片异步加强载,网站图片预加载
# .EXT.LazyLoad 一个真正的异步惰性加载器,由惰性编码器制作。 ##Instance 将其加载为 Ink 插件。 任何时候都应该只运行 1 个实例。 < script type =" text/javascript " src =" /js/ink.LazyLoad.js " > &...
Android的LazyLoad主要体现在网络数据(图片)异步加载、数据库查询、复杂业务逻辑处理以及费时任务操作导致的异步处理等方面。在介绍Android开发过程中,异步处理这个常见的技术问题之前,我们简单回顾下Android...
速度优化图片和头像lazyload异步加载提速、JS文件托管、后台提速 多种小工具多个小工具 强大的自定义代码可自定义公共头部代码、公共底部代码、流量统计代码、添加 自定义网站配色你不必担心搭配不出你想要的风格...
速度优化图片和头像lazyload异步加载提速、JS文件托管、后台提速。 多设备支持自适应布局,支持电脑、Pad、手机以及各种浏览器。 14+颜色风格后台一键换色,14种可选颜色风格和随意自定义配色。 6+小工具读者墙、...
提升网页加载速度的方法有很多种,用 jquery.lazyload.js 实现图片异步延迟加载,对于页面包含图片较多的网站来说,会是个不错的提升网页打开速度的方法。代码君网站栏目页列表左侧,在PC端预览时能看到一个文章略缩...
常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import 1、未用懒加载,vue中路由代码如下 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/Hello...
网络图片异步加载,并且能压缩和缓存网络图片。图片加载完成后,占位图和原图有3种动画切换效果。 作者说:这份代码由于本人苦于EGOImageView 和EGOCache的少许bug,自己切实需要,才花时间写了这样一个...
vue-lazyload:实现图片懒加载,节省用户流量,优化页面加载速度 better-scroll:解决移动端各种滚动场景需求的插件,使移动端滑动体验更加流畅 SCSS:CSS 预编译处理器 ES6:ECMAScript 新一代语法,模块化、解构...
React图像延迟加载组件一个简单的React组件,可处理动画中带有甜美淡入淡出的图像的异步延迟加载-受Polymer 启发看看您可以使用该组件做什么坏的$$$事情我会如何使用该组件,但您会怎样呢? // Dunno what this is ...
速度优化图片和头像lazyload异步加载提速、JS文件托管、后台提速 多种小工具多个小工具 强大的自定义代码可自定义公共头部代码、公共底部代码、流量统计代码、添加meta 自定义网站配色你不必担心搭配不出你想要...
// simple: lazy load images $lazy ( '[data-src]' ) ; // simple: in-view callback $lazy ( '#element' , function ( ) { // inview callback } ) ; $lazy 可以使用异步脚本元素进行配置。 < script ...
这是苹果apple的iphone官方例子,帮助你学习UITableView和显示RSS文本,异步方式加载图片...... 这个例子 分阶段地载入和显示一个UITableView. 一开始载入相关的RSS文本,使表格以最快速度显示出来,然后再异步方式...
比较简单,自己跑一下就可以理解前后台分离这种模式 后端 ...图片懒加载:vue-lazyload 图片切图截图:photoclip pc图轮播:va-carousel pc页面跳转进度条:nprogress pc图片浏览:vue-photo-preview