當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js-图片预加载

發布時間：2023/12/20 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 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._unordered(); //下劃線只在當前內部使用，不外部調用 }}//默認參數Preload.DEFAULTS = {order:'unordered',//默認無序預加載each:null,//每一張圖片加載完畢后執行all:null //所有圖片加載完成后執行 }Preload.prototype._ordered = function(){let imgs = this.imgs,opts = this.opts,count = 0,len = imgs.length;loadImg();//有序與加載function loadImg(){var imgObj = new Image();$(imgObj).on('load error',()=>{opts.each && opts.each(count);if(count >= len){//所有圖片加載完成opts.all && opts.all();}else{//加載下一張 loadImg();}count++;})imgObj.src = imgsArr[count]}}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>

轉載于:https://www.cnblogs.com/huangmin1992/p/10406400.html

總結

以上是生活随笔為你收集整理的js-图片预加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。