图片预加载插件 preLoad.js
1.preLoad.js插件
/*!
* preLoad.js v1.0
* (c) 2017 Meng Fangui
* Released under the MIT License.
*/
(function ($) {
function preLoad(imgs, options) {
//传入imgs参数是图片 还是 数组
this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
//处理传入参数
this.opts = $.extend({}, preLoad.DEFAULTS, options);
//有序加载
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(){
//实例化Image对象
var imgObj = new Image();
//监听load和error事件
$(imgObj).on('load error',function(){
//每加载一张图片触发的事件
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;
}
//实例化Image对象
var imgObj = new Image();
//监听load和error事件
$(imgObj).on('load error', function () {
//每加载一张图片触发的事件
opts.each && opts.each(count);
if (count >= len - 1) {
//所有的图片已经加载完 触发的事件
opts.all && opts.all();
}
count++;
});
//给图片赋值路径
imgObj.src = src;
});
};
$.extend({
preload: function (imgs, opts) {
new preLoad(imgs, opts);
}
});
})(jQuery);
2、实例
2.1 html代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片预加载之无序加载</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<div class="container">
<img src="http://image5.tuku.cn/wallpaper/Landscape%20Wallpapers/8294_2560x1600.jpg" alt="pic" id="img">
<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="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/preload.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js"></script>
</body>
</html>
2.2css代码（main.css）
body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container{
margin: 100px 0;
text-align: center;
}
a{
text-decoration: none;
}
.btn{
display: inline-block;
line-height: 30px;
height: 30px;
outline: 0;
background-color: #eee;
color: #333;
padding: 5px 10px;
}
img{
width: 640px;
}
.btn:hover{
background-color: #ddd;
}
.loading{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #eee;
text-align: center;
font-size: 30px;
}
.progress{
margin-top:300px;
}
2.3js（main.js）
$(function() {
var imgs = [
'http://image5.tuku.cn/wallpaper/Landscape%20Wallpapers/8294_2560x1600.jpg',
'http://www.deskcar.com/desktop/fengjing/2011722123730/1.jpg',
'http://www.33lc.com/article/UploadPic/2012-8/20128181071010672.jpg',
'http://www.bbra.cn/Uploadfiles/imgs/2016/11/02/tu2/001.jpg',
'http://www.ctskyril.com/Public/article/2015-05-29/556812ea53938_thumb.jpg',
'http://www.doudouxitong.net/uploads/allimg/151221/1-15122114433V39.jpg',
'http://d.5857.com/zirfengg_141208/001.jpg',
'http://pic1.win4000.com/wallpaper/4/53fee27a01094.jpg',
'http://pic1.win4000.com/wallpaper/1/56821f8bb1e23.jpg'
];
var index = 0,
len = imgs.length,
$progress = $('.progress');
$.preload(imgs, {
each: function(count) {
$progress.html(Math.round((count + 1) / len * 100) + '%');
},
all: function() {
$('.loading').hide();
document.title = '1/' + len;
}
});
$('.btn').on('click', function() {
if($(this).data('control') === 'prev') {
// 上一张
index = Math.max(0, --index);
} else {
// 下一张
index = Math.min(len - 1, ++index);
}
document.title = (index + 1) + '/' + len;
$('#img').attr('src', imgs[index]);
});
});
3、运行上述代码时，需要注意文件路径
3.1 图片加载前
3.2图片加载后
图片预加载插件 preLoad.js的更多相关文章
- JQ封装图片预加载插件
我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...
- JS图片预加载插件
在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...
- 图片懒加载插件lazyload.js详解
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 图片懒加载插件echo.js——改造
今天做一个列表项需要用到懒加载,搜到网友推荐的echo.js,试用了一下,还不错.除了懒加载,还提供了throttle——节流,即用户快速滑动列表时,很快滑过的项的图片不会加载,只会加载最后停下来的位 ...
- 转载：用Jquery实现的图片预加载技术，可以实现有序加载和无序加载！
一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...
- 图片预加载 js css预加载
图片预加载, 效果非常明显, 特别是有多个图, 方法很简单 , 体验提升了不少 <div class="hidden"> <script type= ...
- Js 之图片懒加载插件
一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- HDU 3436 Queue-jumpers （splay tree）
Queue-jumpers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- 白光LED驱动方案的选择 TPS61043
所有专为驱动白光LED而设计的IC都提供恒定电流夕其中尽大多数是基于电感或电荷泵的解决方案9这两种解决方案各有其优缺点. 电荷泵解决方案也称为开关电容器解决方案,利用分离电容器将电源从输进端传送至输出 ...
- startActivities的使用
和startActivity()类似,startActivities也是界面跳转,可是传入的intent是一个数组,也就是说是多个. 如果我传入的是两个intent: I1和I2.则调用startAc ...
- Unity知识结构总结
前言 本篇以知识结构图的形式对Unity引擎的常用基础知识内容进行了总结和梳理. 如果你学了一点关于Unity引擎的知识,又觉得太杂乱,那么希望本篇会给你一些帮助. 对应引擎版本:Unity 4.6 ...
- sql把一个表的某几列的数据存到另一个表里
一.如何用slq语句把一个表中的某几个字段的数据插入到另一个新表中,就要用下面这条slq语句: insert into 表名1(字段1,字段2) select 字段1,字段2 from 表名2 ...
- 几款开源的ETL工具及ELT初探
ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端的过程.ETL 是构建数据仓 ...
- putty的保存功能如何使用
Putty的设置保存功能隐藏的实在太好了,原来在Connection菜单中修改设置后,并不能在该界面保存. 保存步骤: 1.需要点击Session菜单,选中下面的Default Setting. 2. ...
- Android之计算两个时间的相差
参数: sdate = 2013-07-16 16:14:47 /** * 以友好的方式显示时间 * @param sdate * @return */ public static String ...
- C语言：结构体和联合体(共用体)
结构体:struct 1.结构体变量的首地址能够被其最宽基本类型成员的大小所整除. 2.结构体每个成员相对于结构体首地址的偏移量(offset)都是成员的整数倍. 3.结构体的总大小为结构体最宽基本类 ...
- 我们为什么以及是如何从 Angular.js 迁移到 Vue.js？
在我写这篇文章的时候,我们刚刚从我们的应用程序代码库中删除了最后一行AngularJS代码,结束了一个为期4个月的非侵入性工作,将我们的应用程序从AngularJS迁移到VueJS.在这篇文章中,我将 ...