JS图片预加载插件
在开发H5项目中有时候会遇到要加载大量图片的情况，利用预加载技术可以提高用户浏览时的体验。
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="~/Scripts/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>
插件：
; (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);
JS图片预加载插件的更多相关文章
- 图片预加载插件 preLoad.js
1.preLoad.js插件 /*! * preLoad.js v1.0 * (c) 2017 Meng Fangui * Released under the MIT License. */ (fu ...
- JQ封装图片预加载插件
我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...
- js图片预加载
图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...
- js图片预加载与延迟加载
图片预加载的机制原理:就是提前加载出图片来,给前端的服务器有一定的压力. 图片延迟加载的原理:为了缓解前端服务器的压力,延缓加载图片,符合条件的时候再加载图片,当然不符合的条件就不加载图片. 预加载 ...
- js图片预加载后触发操作
为了使得图片加载完,再触发回调函数,需进行图片预加载处理 function loadImage(url, callback) { var img = new Image(); img.src = ur ...
- js图片预加载以及延迟加载
当我们需要做图片轮播的时候,如果让图片提前下载到本地,用浏览器缓存起来,我们可以用Image对象: function preLoadImg(){ var img=new Image(); img.sr ...
- js图片预加载、有序加载
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...
- js图片预加载实现！
var myImage = (function(){ var imgNode = document.createElement( 'img' ); document.body.appendChild( ...
- 转载：用Jquery实现的图片预加载技术，可以实现有序加载和无序加载！
一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...
随机推荐
- wordpress install 主题
手动安装,你可到访WordPress官方网站的主题部分,找到你喜欢的主题后,可压缩下载到电脑并将其解压缩: 上传.zip 包到服务器,解压到 wordpress/wp-content/themes c ...
- windows server 2008 密码破解
个人是不太喜欢windows 系统的,但有时候没办法 业务已经用在Windows系统上面,今天碰到管理员密码还忘记了的情况,在此记录下 破解密码的过程 1.下载小白菜装机版u盘制作PE启动,详情参考 ...
- iOS资讯详情页实现—WebView和TableView混合使用（转）
iOS资讯详情页实现—WebView和TableView混合使用 如果要实现一个底部带有相关推荐和评论的资讯详情页,很自然会想到WebView和TableView嵌套使用的方案. 这个方案是WebVi ...
- 【原创】datalist repeater 控件的行鼠标单击 以及 滑过特效
原文发布时间为:2009-05-06 -- 来源于本人的百度文章 [由搬家工具导入] 调用方法如：<tr id="<%# Container.ItemIndex+1 %>& ...
- ARM QT实现多点触摸【转】
转自:http://www.cnblogs.com/sky1991/archive/2013/06/03/3114702.html http://www.ptrackapp.com/apclassys ...
- hdu 1492(约数的个数)
The number of divisors(约数) about Humble Numbers Time Limit: 2000/1000 MS (Java/Others) Memory Lim ...
- C# 数组与 list 互相转换案例
在项目中用到了 随手分享下 记得点赞呦! 1,从System.String[]转到List<System.String>System.String[] str={"str&quo ...
- 参数化2--CSV Data Set Config 参数化配置
众所周知,在进行接口测试的过程中,需要创建不同的场景(不同条件的输入,来验证不同的入参的返回结果).因而,在日常的自动化接口监控或商品监控等线上监控过程中,需要配置大量的入参来监控接口的返回是否正确. ...
- oracle小知识点16-诊断事件diagnostic events
http://blog.itpub.net/28539951/viewspace-1983919/
- AMD 的 CommonJS wrapping
其实本文的标题应该是「为什么我不推荐使用 AMD 的 Simplified CommonJS wrapping」,但太长了不好看,为了美观我只能砍掉一截. 它是什么? 为了复用已有的 CommonJS ...