背景
利用图片的预加载技术获得更好的用户体验
什么是有序预加载和无序预加载
jQuery插件的写法
图片预加载，预知用户将要发生的行为，提前加载用户所需的图片
网站loading页
image.png
局部图片的加载
图片相册之结构和样式
无序加载，有序加载
image.png
图片预加载：
分类：
1：无序加载
2：有序加载
清除下滑线：text-decoration：none；
data-control属性
href="javascript:;"空链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片加载之无序加载</title>
<style>
.box {
text-align: center;
margin-top: 20px;
}
.box .btn {
display: inline-block;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
background-color: #fff;
padding: 0 10px;
margin-right: 50px;
color: #333;
}
.box .btn:hover {
background-color: #eee;
}
.box a {
text-decoration: none;
}
.box img {
height: 80vh;
width: 90vw;
}
.loading {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #eee;
text-align: center;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<!--内容展示区域-->
<div class="box">
<img id="img" src="" alt="" title="" />
<p>
<a href="javascript:void(0);" class="btn" data-control="prev">上一页</a>
<a href="javascript:void(0);" class="btn" data-control="nex">下一页</a>
</p>
</div>
<!--内容加载页区域-->
<div class="loading">
<p class="progress">0%</p>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/index2-4.js"></script>
<script>
// 定义一个图片数组
var imgs = [
'https://github.com///blob/master/ProImages/ImgPreloading01.jpg?raw=true',
'https://github.com///blob/master/ProImages/ImgPreloading02.jpg?raw=true',
'https://github.com///blob/master/ProImages/ImgPreloading03.jpg?raw=true',
'https://github.com///blob/master/ProImages/ImgPreloading04.jpg?raw=true',
'https://github.com///blob/master/ProImages/ImgPreloading05.jpg?raw=true',
'https://github.com///blob/master/ProImages/ImgPreloading06.jpg?raw=true',
'https://github.com///blob/master/ProImages/ImgPreloading07.jpg?raw=true',
'https://github.com///blob/master/ProImages/ImgPreloading08.jpg?raw=true',
'https://github.com///blob/master/ProImages/ImgPreloading09.jpg?raw=true',
'https://github.com//blob/master/ProImages/ImgPreloading10.jpg?raw=true'
];
// 获取图片数组的长度
var index = 0;
var len = imgs.length;
var $progress = $('.progress');
// 调用插件
$.preload(imgs, {
// 实现遍历的功能
each: function(count) {
$progress.html(Math.round((count + 1) / len * 100) + '%');
},
// 实现隐藏遮罩层的功能
all: function() {
$('.loading').hide();
}
})
// 定义点击事件
$('.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]);
})
// 为初始页面赋值
document.title = (index + 1) + '/' + len;
$("#img").attr('src', imgs[index]);
</script>
</body>
</html>
image.png
load();
// 有序预加载
function load() {
var imgObj = new Image();
$(imgObj).on('load error', function () {
if(count >= len) {
// 所有图片已经加载完毕
}else{
load();
}
count++;
});
imgObj.src=imgs[count];
}
图片加载preload.js
(function ($) {
function PreLoad(imgs, options) {
this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
this.opts = $.extend({}, PreLoad.DEFAULTS, options);
if (this.opts.order === 'ordered') {
this._ordered();
} else {
this._unoredered();
}
}
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 () {
opts.each && opts.each(count);
if(count >= len) {
// 所有图片已经加载完毕
opts.all && opts.all();
}else{
load();
}
count++;
});
imgObj.src=imgs[count];
}
},
PreLoad.prototype._unoreddered = function () { // 无序加载
var imgs = this.imgs,
opt = this.opts,
count = 0,
len = img.length;
$.each(imgs, function(i, src) {
if(typeof src != 'string') return;
var imgObj = new Image();
图片的预加载：
var imgObj = new Image();
$(imgObj).on('load error', function() {
});
imgObj.src= src;
请点赞！因为你的鼓励是我写作的最大动力！
官方微信公众号
吹逼交流群：711613774
吹逼交流群
网友评论