背景
利用图片的预加载技术取得更好的客户体验
什么是有序预加载和无序预加载
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 = [ ' //blob/master/ProImages/ImgPreloading01.jpg?raw=true', ' //blob/master/ProImages/ImgPreloading02.jpg?raw=true', ' //blob/master/ProImages/ImgPreloading03.jpg?raw=true', ' //blob/master/ProImages/ImgPreloading04.jpg?raw=true', ' //blob/master/ProImages/ImgPreloading05.jpg?raw=true', ' //blob/master/ProImages/ImgPreloading06.jpg?raw=true', ' //blob/master/ProImages/ImgPreloading07.jpg?raw=true', ' //blob/master/ProImages/ImgPreloading08.jpg?raw=true', ' //blob/master/ProImages/ImgPreloading09.jpg?raw=true', ' /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
吹逼交流群 上一篇 目录 已是最后
