JQ封装图片预加载插件
我们知道，图片的加载，特别是资源较大的图片，加载相当耗费时间。为了提高用户体验，不得不使用图片预加载技术来提前加载，以提高用户在浏览时的流畅度。
先来弄明白图片的懒加载和预加载的不同：
1)概念：
懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
2)区别：
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
服务器端区别：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。
下面来封装一个预加载插件，同时讲解它的用法：
整个框架代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>preload</title>
<style>
*{margin:0;pading:0;}
a{
text-decoration: none;
}
.box {text-align:center;}
.btn{
display:inline-block;
height:30px;
line-height:30px;
border:1px solid #ccc;
background: #fff;
padding:0 10px;
margin-right:50px;
color: #333;
}
.btn:hover{
background: #eee;
}
/*进度条样式*/
.loading{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;//撑满整个屏幕
background: #eee;
text-align: center;
font-size:30px;
font-weight:bold;
}
.progress{
margin-top:300px;
}
</style>
</head>
<body>
<!--无序预加载需要写进度条，当加载完毕后才能操作；
有序预加载可以不写进度条，加载完第一张后立即加载第二张、第三张、第四张...
-->
<div class="box">
<img src="http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg" id="img" alt="pic" width="1000">
<p>
<a href="javascript:;" class="btn" data-control="prev">上一张</a>
<a href="javascript:;" class="btn" data-control="next">下一张</a>
</p>
</div>
<!--进度条-->
<div class="loading">
<p class="progress">0%</p>
</div>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/preload.js"></script>
<script>
var imgs = ['http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg',
'http://www.picperweek.com/resource/image/dbc3c16b-5fc6-48e5-aa48-c64739739da2.png',
'http://imgstore.cdn.sogou.com/app/a/100540002/406526.jpg'],
index = 0,
len = imgs.length;
$progress = $('.progress');
//有序预加载,可以不用写进度条部分，如果有写，需要手动配置each()、all()方法
// $.preload(imgs,{
// order:'ordered'
// }); //调用无序预加载 --imgs 数组存放预加载的图片
$.preload(imgs,{
//每张图片加载(load事件)一次触发一次each()
each:function (count) {
//进度条显示百分比进度
$progress.html(Math.round((count + 1) / len * 100) + '%');
},
//加载完毕
all: function () {
$('.loading').hide();
document.title = '1/' + len;//初始化第一张
}
});
//未封装成插件的无序预加载
// $.each(imgs,function(i,src){
// var imgObj = new Image(); //Image()实例用于缓存图片
//
// $(imgObj).on('load error',function(){
// $progress.html(Math.round((count + 1) / len * 100) + '%');
//
// if(count >= len - 1){
// $('.loading').hide();
// document.title = '1/' + len;
// }
// count++;//每加载完一张图片count加1
// });
//
// imgObj.src = src;//缓存图片
// });
//上一页，下一页按钮
$('.btn').on('click',function(){
if('prev' === $(this).data('control')){
index = Math.max(0,--index);
}else{
index = Math.min(len - 1,++index);
}
document.title = (index + 1)+'/' + len;
$('img').attr('src',imgs[index]);
});
</script>
</body>
</html>
JQ插件部分：(preload.js)
;(function($){
function PreLoad(imgs, options){
//保存图片到数组
this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
this.opts = $.extend(PreLoad.defaults,options);
// this._unordered();//如果只有无序预加载
if(this.opts.order === 'ordered'){
this._ordered();
}else{
this._unordered();//默认是无序预加载
}
};
PreLoad.defaults = {
order: 'unordered', //指定默认加载方式为无序
each: null, //每一张图片加载完毕后执行
all: null //所有图片加载完毕后执行
};
//有序预加载
PreLoad.prototype._ordered = function(){
var opts = this.opts,
imgs = this.imgs,
len = imgs.length,
count = 0;
load();
function load(){
var imgObj = new Image();
$(imgObj).on('load error', function () {
//相当于if(opts.each){ opts.each(); } ，如果有配置each()方法则调用，后面的all()同理
opts.each && opts.each(count);
if(count >= len){
//所有图片加载完毕
opts.all && opts.all();
}else{
//如果没加载完，继续调用自身加载下一张
load();
}
count++;
});
imgObj.src = imgs[count];//缓存图片
};
};
//无序加载
PreLoad.prototype._unordered = function(){
var imgs = this.imgs,
opts = this.opts,
count = 0,
len = imgs.length;
$.each(imgs,function(i,src){
//判断图片数组中的每一项是否为字符串，不是字符串会导致出错，因此返回
if(typeof src != 'string') return;
var imgObj = new Image();
$(imgObj).on('load error',function(){
//判断opts.each是否存在，不存在则不执行
opts.each && opts.each(count);
if(count >= len - 1){
//判断opts.all是否存在，存在则执行
opts.all && opts.all();
}
count++;
});
imgObj.src = src;//缓存图片
});
};
//由于不用具体的对象去调用，因此用$.extend(object)挂载插件.
$.extend({
//preload为插件名
preload: function(imgs,opts) {
new PreLoad(imgs,opts);
}
});
})(jQuery);
根据我们的需求来调用不同的插件，将未来可能用到的图片用Image()实例缓存起来。
JQ封装图片预加载插件的更多相关文章
- 图片预加载插件 preLoad.js
1.preLoad.js插件 /*! * preLoad.js v1.0 * (c) 2017 Meng Fangui * Released under the MIT License. */ (fu ...
- JS图片预加载插件
在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...
- 转载：用Jquery实现的图片预加载技术，可以实现有序加载和无序加载！
一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...
- 闭包，jQuery插件的写法：图片预加载
最近做的一些网页,单个网页图片量都比较大,网络不好的情况下,特别卡,这个图片预加载的方法可以牺牲一些时间换来网页的浏览顺畅,还是值得的. //闭包的写法,它内部的变量都是局部的,不会和外部巳有的变量进 ...
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- 用es6类封装的图片预加载技术!
1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 【JQuery Zepto插件】图片预加载
屏幕滚动到图片当前位置加载图片,把图片的真实地址写到data-src属性里即可. <img src="占位图" data-src="img/foot.jpg&quo ...
- 图片预加载的插件使用-jquery.imgpreload.min.js
使用方法: //图片预加载 var the_images = [];//新建一个数组,然后将要加载的图片地址推入这个数组中: the_images.push( 'bg.jpg' ); var load ...
- js 函数的多图片预加载(preload) 带插件版完整解析
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片预加载效果 本篇文章写的 ...
随机推荐
- 《Effective C#》读书笔记-1.C# 语言习惯-1.使用属性而不是可访问的数据成员
思维导图: 大纲: 1.使用属性而不是可访问的数据成员 属性 指定不同的访问权限 隐式属性降低了声明属性的工作量 允许将数据成员作为公共接口的一部分暴露 ...
- Flask 学习笔记
Flask 是一个Web应用框架,我也就是一边看书,一边写博文做记录 这本书: 首先安装Flask ,和配置环境,参考这边博客: 然后就开始学习Flask 了. 1.Application and R ...
- UPYUN云服务体验计划，阅读神器Kindle、LaCie移动硬盘、索尼大法充电宝、高大上极路由、UPYUN代金券等你拿！
请看以下的“通关攻略”,分享你对云服务的“体验心得”,即可赢取绝佳的“通关宝藏”,阅读神器Kindle.LaCie移动硬盘.索尼大法充电宝.高大上极路由.UPYUN代金券等你拿!先来了解下UPYUN能 ...
- 如果非的让我引起大家的狂拍，那我说一句PHP是世界上最好的语言？
如果你进来了,那就达到了我的目的. 不知不觉.net已经用了3年之久,从最初的的小白到现在的大白,总有一种要骂娘的冲动,.net这一路走来现在越走越迷茫,不知道微软的重心在哪里,一直发现不了他的亮点所 ...
- openlayers应用“三”：百度地图纠偏
前两篇文章介绍了openlayers3加载百度在线和离线瓦片地图,页面上能够正常显示.地图加载后在地图上显示一条GPS轨迹,发现离实际位置相差太远,如下图所示: 轨迹形状和实际形状相同,但是位移太远, ...
- 从零开始构建一个的asp.net Core 项目（二）
接着上一篇博客继续进行.上一篇博客只是显示了简单的MVC视图页,这篇博客接着进行,连接上数据库,进行简单的CRUD. 首先我在Controllers文件夹点击右键,添加->控制器 弹出的对话框中 ...
- Linux实战教学笔记11:linux定时任务
第十一节 linux定时任务 标签(空格分隔): Linux实战教学笔记 ---更多资料点我查看 1.1 定时任务Crond介绍 Crond是linux系统中用来定期执行命令/脚本或指定程序任务的一种 ...
- Azure Event Bus 技术研究系列1-Event Hub入门篇
前两个系列研究了Azure IoT Hub和Azure Messaging.最近准备继续研究Azure Event Bus,即Azure的事件中心.首先, Azure Event Hub的官方介绍: ...
- Windows 随手笔记
1.常见快捷方式 远程桌面 mstsc 注册表 regedit 组策略 gpedit.msc 2.Windows命令手册 ping命令 ping [-t] [-a] [-n count] [-l le ...
- int与string的相互转换
<1>stringstream 的方式 C++标准库里面有一个stringstream可以用于各种数据类型之间的转换.无论是从int到string,还是从string到int都可以使用这种 ...