//图片预加载//闭包模拟局部作用于(function($){ ???function Preload(imgs,options){ ???????this.imgs = (typeof imgs === ‘string‘) ? [imgs]:imgs; ???????this.opts = $.extend({},Preload.DEFAULTS,options); ???????//无序加载 ???????this._unordered(); //下划线 只在当前内部使用，不外部调用 ???} ???//默认参数 ???Preload.DEFAULTS = { ???????each:null,//每一张图片加载完毕后执行 ???????all:null //所有图片加载完成后执行 ???} ???Preload.prototype._unordered = function(){//无序加载 ???????let imgs = this.imgs, ???????????opts = this.opts, ???????????count = 0, ???????????len = imgs.length; ???????$.each(imgs,(i,src)=>{ ???????????if(typeof src !=‘string‘){return;} ???????????var imgObj = new Image(); ???????????$(imgObj).on(‘load error‘,()=>{ ???????????????opts.each && opts.each(count); ???????????????if(count >= len -1){ ???????????????????opts.all && opts.all(); ???????????????} ???????????????count ++; ???????????}) ???????????????????????imgObj.src = src; ???????}) ???}; ???//插件封装 ???$.extend({ ???????preload:function(imgs,options){ ???????????new Preload(imgs,options); ???????} ???})})(jQuery);调用
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>图片预加载</title> ???<style> ???????.img-box,.btn{ ???????????text-align: center; ???????} ???????.img-box img{ ???????????width: 500px; ???????????height: 500px; ???????} ???????.btn a{ ???????????display: inline-block; ???????????height: 30px; ???????????line-height: 30px; ???????????border: 1px solid red; ???????????border-radius: 5px; ???????????margin-right: 10px; ???????????padding: 0 10px; ???????????color: #333; ???????????text-decoration: none; ???????} ???????.btn a:hover{ ???????????background: #ccc; ???????} ???????.loading{ ???????????position: fixed; ???????????top: 0; ???????????left: 0; ???????????right: 0; ???????????bottom: 0; ???????????z-index: 999; ???????????background: rosybrown; ???????????text-align: center; ???????????font-size: 30px; ???????????font-weight: 700; ???????} ???????.progress{ ???????????margin-top: 300px; ???????} ???</style></head><body> ???<div class="box"> ???????<div class="img-box"> ???????????<img src="http://pic1.win4000.com/wallpaper/4/59c480193e05b.jpg" alt=""> ???????</div> ???????<div class="btn"> ???????????<a href="javascript:;" class="prev" data-controle="prev">上一页</a> ???????????<a href="javascript:;" class="next" data-controle="next">下一页</a> ???????</div> ???</div> ???<!-- 预加载 --> ???<div class="loading"> ???????<div class="progress">0%</div> ???</div> ???<script src="js/jquery-3.3.1.min.js"></script> ???<script src="js/preload.js"></script> ???<script> ???????let imgsArr = [ ???????????‘http://pic1.win4000.com/wallpaper/4/59c480193e05b.jpg‘, ???????????‘http://pic1.win4000.com/wallpaper/7/57f9f84f0a29f.jpg‘, ???????????‘http://img17.3lian.com/d/file/201702/20/3a1744009d4b0e32a8a27e13299fc658.jpg‘, ???????????‘http://m.wendangwang.com/pic/ac555f0efbaa75d6a2b43778/7-810-jpg_6-1080-0-0-1080.jpg‘, ???????????‘http://pic170.nipic.com/file/20180620/27194830_202055800038_2.jpg‘ ???????] ???????//调用插件 ???????let index = 0, ???????????len = imgsArr.length, ???????????$progress = $(‘.progress‘); ???????$.preload(imgsArr,{ ???????????each:function(count){ ???????????????$progress.html(Math.round((count+1)/len*100) + ‘%‘); ???????????}, ???????????all:function(){ ???????????????$(‘.loading‘).hide(); ????????????????document.title = ‘1/‘ + len; ???????????} ???????}) ???????$(‘.btn a‘).on(‘click‘,function(){ ???????????if($(this).data(‘controle‘) === ‘prev‘){ ???????????????index = Math.max(0,--index) ???????????}else{ ???????????????index = Math.min(len - 1,++index) ???????????} ???????????document.title = (index) + ‘/‘ + len ???????????$(‘.img-box img‘).attr(‘src‘,imgsArr[index]); ???????}) ???</script></body></html>js-图片预加载
原文地址：https://www.cnblogs.com/huangmin1992/p/10406400.html