图片预加载插件 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实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- golang 字符串与整数, 布尔转换 strconv
strconv 是golang对于字符串和基本数据类型之间的转换字符串转整数testStr := "1000" testInt, err := strconv.Atoi(testS ...
- 使用Microsoft Unity进行日志记录
需要记录日志的地方包括:进入方法的时候,传参的时候,统计执行时间,方法返回参数的时候,退出语句块的时候,出现异常的时候,等等.先来体验不使用Micirosoft Unity进行日志记录. class ...
- MVC使用JCrop上传、裁剪图片
JCrop用来裁剪图片,本篇想体验的是: 在视图页上传图片: 上传成功,跳转到另外一个编辑视图页,使用JCrop对该图片裁剪,并保存图片到指定文件夹: 裁剪成功后,在主视图页显示裁剪图片: 当然,实际 ...
- latex用法疑难解析
latex用法疑难解析 1.问题:如何生成ps(PostScript)文件? 回答: 方法有二 (1)用dvips这个工具,在WinEdt编辑器中专门有一个按钮: (2)如果使用windows系统的话 ...
- 单点登录(SSO)问题
单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.
- OTL使用指南
1 OTL简介 OTL 是 Oracle, Odbcand DB2-CLI Template Library 的缩写,是一个C++编译中操控关系数据库的模板库,它目前几乎支持当前所有的各种主流数据库, ...
- 附 Java对象内存布局
注意:本篇博客,主要参考自<深入理解Java虚拟机(第二版)> 1.对象在内存中存储的布局分为三块 对象头 存储对象自身的运行时数据:Mark Word(在32bit和64bit虚拟机上长 ...
- go语言基础之map介绍和使用
1.map介绍 Go语言中的map(映射.字典)是一种内置的数据结构,它是一个无序的key—value对的集合,比如以身份证号作为唯一键来标识一个人的信息. 2.map示例 map格式为: map[k ...
- Eclipse上传代码到GitHub
平时工作学习中难免会在Github搜索一下开源的Android代码, Android系统本身的代码就是托管在GitHub上,如果平时随手做了一个Demo,托管在云盘感觉不入流,如果平时自己一时兴起写了 ...
- 关于vue单页面应用总是先出现主页一闪而过的现象
问题描述:每次强制刷新登陆页面时,总是会出现主页一闪而过的现象,如果主页上有请求,还会请求后台数据.感觉不太正常,所以想到研究下为什么,然后去掉这个主页一闪而过的现象 1.先看下我之前的app的rou ...