图片预加载插件 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实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- Node.js学习笔记(1) - Node.js简介
近期在看一些Node.js的知识,看完后觉得,一些前面的东西忘记了,于是整理一下,方便自己查阅,也希望对学习Node.js的朋友有些帮助: 当然以下只是我个人的观点和理解,不喜勿喷,也望大神指教. 一 ...
- Polly简介 — 1. 故障处理策略
Polly 是 .Net 下的一套瞬时故障处理及恢复的函式库,可让开发者以fluent及线程安全的方式来应用诸如Retry.Circuit Breaker.Timeout.Bulkhead Isola ...
- 斑马Zebra驱动下载
Zebra GT800 点击进入下载页-> 自动安装包[WINXP/WIN7/WIN8]点击进入下载页-> 添加打印机向导[WINXP/WIN7/WIN8] 热门下载 · Zebra ...
- unity3d摄像机参数
1. Clear Flags:清除标记.决定屏幕的哪部分将被清除.一般用户使用对台摄像机来描绘不同游戏对象的情况,有3中模式选择: Skybox:天空盒.默认模式.在屏幕中的空白部分将显示当前摄像机的 ...
- 阿里云云盾抗下全球最大DDoS攻击(5亿次请求，95万QPS HTTPS CC攻击) ，阿里百万级QPS资源调度系统，一般的服务器qps多少？ QPS/TPS/并发量/系统吞吐量
阿里云云盾抗下全球最大DDoS攻击(5亿次请求,95万QPS HTTPS CC攻击) 作者:用户 来源:互联网 时间:2016-03-30 13:32:40 安全流量事件https互联网资源 摘要: ...
- SQL调用WebService接口
今天在做一个非常奇葩的东西.中间有个过程要在SQL触发器里面调用webservice接口.呵呵~ ALTER TRIGGER tgr_UpdateMemcached ON dbo.[User] AFT ...
- Furure的简单介绍和使用
引子:
- C语言中static的作用及C语言中使用静态函数有何好处
转自:http://www.jb51.net/article/74830.htm 在C语言中,static的作用有三条:一是隐藏功能,二是保持持久性功能,三是默认初始化为0. 在C语言中,static ...
- 第四章 四种List实现类的对比总结
1.ArrayList 非线程安全 基于对象数组 get(int index)不需要遍历数组,速度快: iterator()方法中调用了get(int index),所以速度也快 set(int in ...
- Ubuntu 12.04 安装配置 Apache2
Apache2安装 1 我们使用root账户进行安装,首先切换到root账户,输入命令: sudo su 2 安装 Apache2 apt-get install apache2 在浏览器输入你服务器 ...