当页面中图片很多的情况下，如果不做图片预加载，在图片没加载出来之前去访问，那用户看到的就是一片空白，影响用户体验，
这个时候图片预加载就非常重要了。
在进入主体页面之前先做一个loading出来，显示图片加载进度，加载完毕了再进入实际页面。
代码如下：
HTML
<div class="box"> <img src="http://pic29.photophoto.cn/20131231/0046043373506387_b.jpg" id="img" width="800px"> <p> <a href="javascript:;" class="btn" data-control="prev">上一页</a> <a href="javascript:;" class="btn" data-control="next">下一页</a> </p> </div> // 加载loading <div class="loading"> <p class="progress">0%</p> </div>
JS
var imgs = [ 'http://pic29.photophoto.cn/20131231/0046043373506387_b.jpg', 'http://pic36.photophoto.cn/20150713/1155116324021755_b.jpg', 'http://pic36.photophoto.cn/20150725/1155117408459577_b.jpg', 'http://g.hiphotos.baidu.com/zhidao/pic/item/e850352ac65c1038653edeb8b4119313b07e8903.jpg', 'http://pic31.photophoto.cn/20140412/0005018347235619_b.jpg', 'http://pic36.photophoto.cn/20150702/0005018795527336_b.jpg', 'http://pic35.photophoto.cn/20150620/1155117496421877_b.jpg' ]; var index = 0, len = imgs.length, count = 0, $progress = $('.progress'); $.each(imgs,function(i,src){ var imgObj = new Image(); $(imgObj).on('load error',function(){ alert(2) $progress.html(Math.round((count + 1) / len * 100) + '%'); if (count >= len - 1) { $('.loading').hide(); document.title = '1/' + len; } count ++; }); imgObj.src = src }); $('.btn').on('click',function(){ if ($(this).data('control') === 'prev') { // 第一种 // index -- ; // if (index < 0) { // index = 0; // } // 第二种 // Math.max(0,1,2,3); 它会返回里面的最大值 index = Math.max(0,--index); //--在前面,是先将index做减法再去和0比较,如果--在后面,就是先将index跟0比较再进行-- } else { index = Math.min(len-1,++index); } document.title = (index+1) + '/' + len; $('#img').attr('src',imgs[index]); })
实现效果如下：
这样在切换的时候就不会出现图片还没有加载出来的情况了。
由于图片预加载是常见功能，这种时候我们可以封装为一个JQ插件
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片预加载之无序加载-封装插件</title> <style> html,body{ height: 100%; } a{ text-decoration: none; } .box{ text-align: center; } .btn{ display: inline-block; height: 30px; line-height: 30px; border: 1px solid #ccc; background-color: #fff; padding: 0 10px; margin-right: 50px; color: #333; } .btn:hover{ background-color: #eee; } .loading{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #eeeeee; text-align: center; font-size: 30px; } .progress { margin-top: 300px; } </style> </head> <body> <div class="box"> <img src="http://pic29.photophoto.cn/20131231/0046043373506387_b.jpg" id="img" width="800px"> <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-2.1.4.min.js"></script> <script src="js/preload.js"></script> <script> var imgs = [ 'http://pic29.photophoto.cn/20131231/0046043373506387_b.jpg', 'http://pic36.photophoto.cn/20150713/1155116324021755_b.jpg', 'http://pic36.photophoto.cn/20150725/1155117408459577_b.jpg', 'http://g.hiphotos.baidu.com/zhidao/pic/item/e850352ac65c1038653edeb8b4119313b07e8903.jpg', 'http://pic31.photophoto.cn/20140412/0005018347235619_b.jpg', 'http://pic36.photophoto.cn/20150702/0005018795527336_b.jpg', 'http://pic35.photophoto.cn/20150620/1155117496421877_b.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); //--在前面,是先将index做减法再去和0比较,如果--在后面,就是先将index跟0比较再进行-- } else { index = Math.min(len-1,++index); } document.title = (index+1) + '/' + len; $('#img').attr('src',imgs[index]); }) </script> </body> </html>
插件JS：
/** * Created by Administrator on 2018/9/16 0016. */ //图片预加载插件 (function($){ function PreLoad(imgs, options){ this.imgs = (typeof imgs === 'string') ? [imgs] : imgs; this.opts = $.extend({},PreLoad.DEFAULTS,options ); this._unoredered(); } PreLoad.DEFAULTS = { each : null, //每一张图片加载以后执行 all : null //所有图片加载以后执行 } PreLoad.prototype._unoredered = function(){ //无序加载 var imgs = this.imgs, opts = this.opts, count = 0, len = imgs.length; $.each(imgs,function(i,src){ if (typeof src != 'string') return; var imgObj = new Image(); $(imgObj).on('load error',function(){ //$progress.html(Math.round((count + 1) / len * 100) + '%'); opts.each && opts.each(count); if (count >= len - 1) { opts.all && opts.all(); } count ++; }); imgObj.src = src }); } //$.fn.extend -> $('#img').preload() //$.extend -> $.preload(); $.extend({ preload: function(imgs, opts){ new PreLoad(imgs,opts); } }) })(jQuery);