图片预加载插件 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实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- Eclipse upper case/lower case
How do I make a lower case string in Eclipse to be upper case?Using Eclipse, I want to select a stri ...
- A SCSI command code -- SIMPLIFIED DIRECT-ACCESS DEVICE (RBC)
SIMPLIFIED DIRECT-ACCESS DEVICE (RBC) ------------------------------------------ OP B Description -- ...
- 在 CentOS 和 RHEL 上安装 Puppet 服务器和客户端
https://linux.cn/article-3959-1.html https://docs.puppet.com/
- [MySql]锁表与解锁
摘要 为啥会出现锁表的情况?锁表会导致数据表的其他操作超时,频繁的插入修改查询很容易出现锁表的情况.如果遇到这种情况,临时的解决办法,可以通过下面的方式进行解锁.如果长期有效的解决,那么就需要优化项目 ...
- Windows Phone Silverlight 8.1 apps
The Windows Phone Silverlight 8.1 app model gives Windows Phone 8 developers access to some of the n ...
- 05引用类型以及特殊引用类型string
基本 □ 哪些属于引用类型 类(object,string),接口.数组.委托 □ 引用类型分配在哪里 ● 引用类型变量位于线程栈. ● 引用类型实例分配在托管堆上. ● 当引用类型实例的大小小于85 ...
- 再次理解多线程线程安全问题（理解java内存模型后）
1.多线程访问的共享资源存在线程安全问题, 无外乎访问两种共享资源. 1)多线程访问方法区数据.存在线程安全问题,通过加锁 2)多线程访问实例变量:被访问对象是单例时存在线程安全,被访问对象是多例时, ...
- easyui中使用的遮罩层
easyui 的 dialog 是继承自 window的,而 window中有modal这样的属性(见参考资料),就是用于打开模态的窗口的,也就是你说的有遮罩层的窗口.所以不需要额外的代码,仅需在di ...
- waf bypass
1.前言 去年到现在就一直有人希望我出一篇关于waf绕过的文章,我觉得这种老生常谈的话题也没什么可写的.很多人一遇到waf就发懵,不知如何是好,能搜到的各种姿势也是然并卵.但是积累姿势的过程也是迭代的 ...
- 架构师书单 2nd Edition
了2007年的目标,列了下面待读或重读的书单. "其实中国程序员,现在最需要的是一张安静的书桌.",的确,中国架构师大多缺乏系统的基础知识,与其自欺欺人的宣扬"读书 ...