jquery-懒加载插件
在Web应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,
系统的价值也因此会大打折扣。因此,提高系统响应速度,是非常重要的。
从此可知,再好的网站,再炫的网站,只要在网页打开速度方面缓慢,用户都会对这个网站订下一个差评的分数。
往往拉低网站性能都是图片过多或过大方面,所以一般解决这个问题,网站性能都会大大的提高。
而jquery.lazyload.js这款插件可以解决这方面的问题,而且它简单易懂。
以下为它的简单使用代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<style>
img{
width:200px;
height: 200px;
}
li .list{
background-size: contain;
width: 200px;
height: 200px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li>1<img class="lazy" data-original="img/1.png" alt=""></li>
<li>2<img class="lazy" data-original="img/2.jpg" alt=""></li>
<li>3<img class="lazy" data-original="img/3.jpg" alt=""></li>
<li>4<img class="lazy" data-original="img/4.jpg" alt=""></li>
<li>5<img class="lazy" data-original="img/5.jpg" alt=""></li>
<li>6<img class="lazy" data-original="img/6.png" alt=""></li>
<li>7<div class="list lazy" data-original="img/7.jpg"></div></li>
</ul> <script>
console.log($("img.lazy").is("img"));
$(".lazy").lazyload({effect : "fadeIn"});
</script>
</body>
</html>
具体使用:传送门
这款插件是依赖于jquery的。
这个插件是可以背景加载的,只要是图片加载,就可以懒加载。
这个插件的编写时使用trigger()自定义事件的,贯穿整个插件。
核心代码:
$self.one("appear", function() {
if (!this.loaded) {
if (settings.appear) {
var elements_left = elements.length;
settings.appear.call(self, elements_left, settings);
}
$("<img />")
.one("load", function() {
var original = $self.attr("data-" + settings.data_attribute);
$self.hide();
if ($self.is("img")) {
$self.attr("src", original);
} else {
$self.css("background-image", "url('" + original + "')");
}
$self[settings.effect](settings.effect_speed); self.loaded = true; /* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp); if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
})
.attr("src", $self.attr("data-" + settings.data_attribute));
}
});
jquery-懒加载插件的更多相关文章
- jQuery懒加载插件jquery.lazyload.js使用说明实例
jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...
- jQuery懒加载插件 – jquery.lazyload.js简单调用
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery懒加载插件 – jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery懒加载插件
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jquery懒加载插件 jquery_lazyload 下载
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code https://pan.baidu.com/s/1UbOeyL_AaSNN_KMA4M ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- 图片懒加载插件lazyload使用方法
图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...
- Vue图片懒加载插件
图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...
- vue-lazyload懒加载插件的使用
vue-lazyload懒加载插件的使用其实很简单,不想vue-loader官网用法写的那么简单.下面代码演示: 1.安装插件 npm install vue-lazyload --save 2. ...
随机推荐
- RPC原理及RPC实例分析
在学校期间大家都写过不少程序,比如写个hello world服务类,然后本地调用下,如下所示.这些程序的特点是服务消费方和服务提供方是本地调用关系. 1 2 3 4 5 6 public class ...
- 【HDU2222】Keywords Search AC自动机
[HDU2222]Keywords Search Problem Description In the modern time, Search engine came into the life of ...
- [NOIP2016]愤怒的小鸟 D2 T3 状压DP
[NOIP2016]愤怒的小鸟 D2 T3 Description Kiana最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于(0,0)处,每次Kiana可 ...
- Linux 常识
一.Linux 各目录及每个目录的详细介绍: Linux目录和Windows目录有着很大的不同,Linux目录类似一个树,最顶层是其根目录,如下图: /bin 二进制可执行命令 /dev 设备特殊文件 ...
- AFNetWorking设置HTTPRequestHeaders的坑
今天在项目中要封装一个请求头但是用如下方法总是失败: 求其原因不知道: 于是乎改用了属性对象后居然成功了..: // // RequestManager.m // 获取天气demo // // ...
- MySQL中EXPLAIN命令详解
explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. 使用方法,在select语句前加上explain就可以了: 如: expla ...
- RDLC报表数据工具栏关闭后打开方法
显示方法为:Ctrl + Alt + D 快捷键 只做自己记录用
- VS2012中丢失ArcGIS模板的解决方法
VS2012中丢失ArcGIS模板的解决方法 由于ArcGIS10.0(for .NET)默认是用VS2010作为开发工具的,所以在先安装VS2012后装ArcGIS10.0 桌面版及ArcObjec ...
- bfs codeforces 754B Ilya and tic-tac-toe game
这题简直把我坑死了 所有的坑都被我中了 题意: 思路:bfs or 模拟 模拟似乎没有什么坑 但是bfs真的是坑 AC代码: #include "iostream" #includ ...
- #iOS问题记录#关于NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL, -9801)
响应Apple的号召,将APP里的HTTP请求全部升级为HTTPS,一切配置OK,正常的请求也没问题: 但,当使用SDwebImg缓存图片时,遇到了标题写的问题: 根据资料得: 这个问题的出现是因为i ...