图片无序预加载技术一
2024-05-24 01:46:01
看视频记录一下。
预加载分为无序预加载和有序预加载。
demo1.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片加载</title><style>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;}</style>
</head>
<body><div class="box"><img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="" id="img" width="1000" height="600"><p><a href="javascript:;" class="btn" data-control="prev">上一页</a><a href="javascript:;" class="btn" data-control="next">下一页</a></p></div><script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script><script>var imgs=['http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg','http://pic2.ooopic.com/10/51/63/13b1OOOPIC17.jpg','http://img2.3lian.com/img2009/06/16/024.jpg','http://pic1.nipic.com/2008-12-25/2008122510134038_2.jpg','http://www.taopic.com/uploads/allimg/111017/2136-11101G62S667.jpg','http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg'];var index= 0,len=imgs.length;$('.btn').on('click',function(){if('prev' === $(this).data('control')){//上一张/*index--;if(index<0){index=0;}*/index=Math.max(0,--index);//返回最大值}else{//下一张index=Math.min(len-1,++index);}document.title=(index+1)+'/'+len;$('#img').attr('src',imgs[index]);});</script>
</body>
</html>没有使用预加载技术，以至于点击上一页或者下一页按钮的时候出现假死状态。用户体验不好。下面将其改成无序预加载效果。
demo2.html
<!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: #eee;text-align: center;font-size: 30px;}.progress{margin-top: 300px;}</style>
</head>
<body><div class="box"><img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="" id="img" width="1000" height="600"><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="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script><script>var imgs=['http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg','http://pic2.ooopic.com/10/51/63/13b1OOOPIC17.jpg','http://pic1.nipic.com/2008-12-25/2008122510134038_2.jpg','http://p3.so.qhmsg.com/t014d3503dd2d67d728.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(){$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('prev' === $(this).data('control')){//上一张/*index--;if(index<0){index=0;}*/index=Math.max(0,--index);//返回最大值}else{//下一张index=Math.min(len-1,++index);}document.title=(index+1)+'/'+len;$('#img').attr('src',imgs[index]);});</script>
</body>
</html>demo3.html
将js写成jquery
<!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: #eee;text-align: center;font-size: 30px;}.progress{margin-top: 300px;}</style>
</head>
<body><div class="box"><img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="" id="img" width="1000" height="600"><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="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script><script src="preload.js"></script><script>var imgs=['http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg','http://pic2.ooopic.com/10/51/63/13b1OOOPIC17.jpg','http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg'];var index= 0,len=imgs.length,$progress=$('.progress');$.preload(imgs,{each:function(count){$progress.html(Math.round((count+1)/len *100)+'%');},all:function(argument) {$('.loading').hide();document.title='1/'+len;}});$('.btn').on('click',function(){if('prev' === $(this).data('control')){//上一张/*index--;if(index<0){index=0;}*/index=Math.max(0,--index);//返回最大值}else{//下一张index=Math.min(len-1,++index);}document.title=(index+1)+'/'+len;$('#img').attr('src',imgs[index]);});</script>
</body>
</html>
//图片预加载
(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(){opts.each && opts.each(count);if(count >= len-1){opts.all && opts.all();}count++;});imgObj.src=src;});};$.extend({preload:function(imgs,opts){new PreLoad(imgs,opts);}});
})(jQuery);图片无序预加载技术一相关推荐
- 转javascript图片预加载技术
今天看一篇文章,再谈javascript图片预加载技术(http://www.planeart.cn/?p=1121) http://www.qiqiboy.com/2011/05/20/javasc ...
- 很山寨的网页游戏图片预加载技术
很山寨的网页游戏图片预加载技术 以下一种简单易懂,方便易用的网页图片预加载技术.:=D. 这种预加载技术使用了javascript技术.静态页面技术.div隐藏技术.gif动态图片技术.bash脚本技 ...
- 关于图片的预加载以及延伸
图片的预加载不难,方式有很多种,本来不打算单独写一篇文章,因为网上有很多大神写的很好,本来转载一篇相关的优质文章就好了.直到我读了一篇文章,发现图片的预加载有不少延伸知识,于是加以整理,有了这篇文章. ...
- js虚拟代理实现图片的预加载
<h1>虚拟代理实现图片的预加载</h1><p>在Web开发中,图片预加载是一种常见的技术,如果直接给某个img标签节点这只src属性,由于图片过大或者网络不佳,图 ...
- 前端性能优化－－预加载技术
当我们谈到前端的性能时,总是会提到比如合并.压缩.缓存或者在服务器上开启gzip之类的,目的都是为了让页面加载的更快. 资源预拉取(prefetch)则是另一种性能优化的技术.通过预拉取可以告诉浏览器 ...
- Jquery背景图片的预加载
Jquery背景图片的预加载 //定义预加载图片列表的函数(有参数) jQuery.preloadImages = function(){ //遍历图片 for(var i = 0; i&l ...
- ios 微信浏览器 预加载_小程序页面预加载技术
lightning-load-project 集成方式 看不效果览图的话,请看博客 https://blog.csdn.net/sinat_27612147/article/details/80802 ...
- JS 实现图片的预加载（转载）
图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作. 下面的函数实现了一个我 ...
- html图片怎么预加载,如何利用CSS和Javascript实现图片预加载
说到图片预加载,想必大家已经很熟悉了,在平时的项目中,我们常用插件实现预加载,比如:懒加载lazyload插件等等.如果你想了解下lazyload,可以看下这两篇文章: 今天主要想介绍不用插件实现图片 ...
最新文章
- spring中注解无法修饰静态变量
- [渝粤教育] 广东-国家-开放大学 10763k2_客户服务管理_21秋考试
- 小米登录协议分析_性能测试篇之Loadrunner与ida工具结合完成java vuser协议的脚本...
- 141.Linked List Cycle
- Object类 java 1614965390
- 【 如何将.vue文件中的所有css代码放入一个.css文件中】
- C语言丨小 学 数 学（二）：高精度乘法
- html5 游戏 算法,JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】...
- PCL点云参数估计算法之RANSAC和LMEDS
- canvas绘制五角星
- 5G时代下的人工智能发展
- openssl的部分使用例子
- kibana的安装（elasticsearch图形化界面）
- 【搬家】写一个技术博客
- 动态规划(Dynamic Programing)背包——01背包
- QT Creator 7 如何同时运行多个客户端窗口（Client）
- 资产管理可视化系统-RFID固定资产管理追踪方案-RFID资产管理解决方案-新导智能
- 客户端+调用+matlab,基于web的android图像处理示范(Win7+Apache+PHP+Matlab+Android)
- 怎么查看war包代码
- [论文阅读] Curriculum Semi-supervised Segmentation