先来个基本效果的图:
图片是百度上瞎搜的,大家凑合看。
然后说说节本业务:打开页面时显示一个进度条,是“所有图片加载的进度信息”,等所有的图片都加载完成了再开始显示上图的效果。
再然后还是那几句:
这个特效是跟着慕课网上的视频学的,视频链接如下:https://www.imooc.com/learn/502
源码和技术点已经上传到附件,有需要的可以查看、下载。
下面直接上代码(PS:代码中的注释是根据个人理解添加的,并不是老师原有的注释):
1、页面基本结构:
<div class="box"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498048638722&di=93633bebf0b1fc921fc42e8d0644e9c1&imgtype=0&src=http%3A%2F%2Fatt.bbs.duowan.com%2Fforum%2F201604%2F12%2F210015dj7ay5yw9ylaymmn.jpg" id="imgArea" width="1200"/> <p> <a href="javascript:void(0)" class="btn" data-control="prev">上一页</a> <a href="javascript:void(0)" class="btn" data-control="next">下一页</a> </p> </div> <!-- 加载提示框 --> <div class="loading"> <p class="progress">0%</p> </div>
2、CSS样式:
<style> html,body{ margin: 0; padding: 0; width: 100%; height: 100%; } a{text-decoration: none;} .box{text-align: center;} .btn{ display:inline-block; height:40px; line-height: 40px; border:1px solid #ccc; background-color: #fff; padding: 0 15px; 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: 420px; } </style>
3、JS代码(附件中JS文件夹下demo1_preload(无序加载,非插件).js):
//图片数组 var imgs=[ "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498048638722&di=93633bebf0b1fc921fc42e8d0644e9c1&imgtype=0&src=http%3A%2F%2Fatt.bbs.duowan.com%2Fforum%2F201604%2F12%2F210015dj7ay5yw9ylaymmn.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046785208&di=2e693fe255f7dc064bf940d16b5d8b6b&imgtype=0&src=http%3A%2F%2Fbbsfiles.vivo.com.cn%2Fvivobbs%2Fattachment%2Fforum%2F201601%2F06%2F113313hbbbrf3fqw3qzbxp.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046876926&di=78448958bad3463d63acb892052582fa&imgtype=0&src=http%3A%2F%2Fstatic01.coloros.com%2Fbbs%2Fdata%2Fattachment%2Fforum%2F201506%2F22%2F230200woaarrmta41rgket.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046913853&di=ee33b4635aa2fad919360084ff52ff43&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201502%2F13%2F174551vk3qq9nyeq965kml.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046893014&di=d038443067de0796e68e70464768da83&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201410%2F25%2F220832wlwzqq6ble9ql6rd.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046883822&di=9190192e9187c4f9098eded1b593b5f4&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201503%2F06%2F162347xwvgpdfpw5p7rvvv.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498641626&di=6405f296231e22070f1e2eeafe631b88&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.iforworld.com%2Fbizhi%2F4k%2Fpic%2F20160224%2F003.JPG", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046940019&di=b91053d71c20207d04cfc6d3cb386067&imgtype=0&src=http%3A%2F%2Fi7.download.fd.pchome.net%2Ft_2560x1600%2Fg1%2FM00%2F12%2F1A%2FooYBAFaxvnaIYS82AB4dTtRS-E4AAC3fwLtL7EAHh1m451.jpg" ]; var index = 0,len = imgs.length,count=0; //alert(document.documentElement.clientHeight);//获取页面的高度 $(function(){ var $progress = $(".progress"); //预加载各张图片 $.each(imgs,function(i,src){ var imgObj = new Image(); imgObj.src = src; //正常加载 $(imgObj).bind("load error",function(){ //alert((count+1)+"\n"+len+"\n"+(count+1)/len); $progress.html(Math.round((count+1)/len*100)+"%"); //当图片预加载完成显示第一张图片的信息 if(count>=len-1){ //显示图片 $(".loading").hide();//隐藏 document.title="1/"+len; } count++; }); }); //按钮的点击事件 $(".btn").click(function(){ if("prev"===$(this).attr("data-control")){//上一张 index--;//下标减小 if(index<0) index = 0; //index = Math.max(0,--index);//index先--,之后得到的值与0比较,返回较大的值 }else{//下一张 index++;//下标增大 if(index>len-1){//数组下标从0开始 index = len-1; } //index = Math.min(len-1,++index); } document.title=(index+1)+"/"+len; $("#imgArea").attr("src",imgs[index]); }); });
4、将第三步中加载图片的代码写成插件进行调用:
插件代码(附件中JS文件夹下preload.js):
//图片预加载 //使用闭包模拟局部作用域 /* (function(){ })(); */ //传入jQuery对象,用$来接收,这样子就可以使用jQuery了 /* (function($){ })(jQuery); */ (function($){ //构造函数 //imgs:图片数组 //options:参数 function PreLoad(imgs,options){ //若传入图片数组的是字符串,手动转成数组 this.imgs = ((typeof imgs)==="string"?[imgs]:imgs); //将传入的options参数替换掉默认的PreLoad.DEFAULTS,生成一个新的对象,并返回给this.opts this.opts = $.extend({},PreLoad.DEFAULTS,options); //无序方法:下划线表示这个方法只在内部使用,不提供外部调用 this._unordered(); } //设置默认参数 PreLoad.DEFAULTS={ each:null,//每一张图片加载完成后执行 all:null//所有图片加载完成后执行 }; //在原型上添加无序加载的代码 PreLoad.prototype._unordered=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.src = src; //正常加载或加载失败都执行该方法,以避免“加载失败时页面一直都显示正在加载数据”的问题 $(imgObj).bind("load error",function(){ opts.each && opts.each(count); //当图片预加载完成显示第一张图片的信息 if(count>=len-1){ //显示图片 opts.all && opts.all();//若是有all就调用all()方法 } count++; }); }); }; //定义一个工具方法 $.extend({ preload:function(imgs,opts){ new PreLoad(imgs,opts); } }); })(jQuery); //插件学习方法:http://www.imooc.com/video/14434/0
页面调用:第三步JS中“预加载各张图片”的代码由原来的改成以下内容:
//预加载各张图片 $.each(imgs,function(i,src){ var imgObj = new Image(); imgObj.src = src; //正常加载 $(imgObj).bind("load error",function(){ //alert((count+1)+"\n"+len+"\n"+(count+1)/len); $progress.html(Math.round((count+1)/len*100)+"%"); //当图片预加载完成显示第一张图片的信息 if(count>=len-1){ //显示图片 $(".loading").hide();//隐藏 document.title="1/"+len; } count++; }); });
(PS:附件中的demo1(图片无序加载).html就是使用插件进行加载的)
最后,感谢老师,也祝大家好运!
相关推荐
NULL 博文链接:https://1017401036.iteye.com/blog/2400798
jquery.lazyload图片预加载 调用简单 内有实例
HTML+jquery图片预加载功能,实用于web及移动端
图片预加载特效,
JS javascript 图片 预加载 实现图片的加载
经过自己的整理,能实现图片预加载效果的效果,有效减少带宽的占用,网页图片预加载效果
lazyload图片预加载js文件盒相关示例代码
jquery图片预加载延迟加载 先打开默认图片,随后顺序加载 优化打开速度 提升用户体验 极力推荐
站点实现预加载loading,但指定区域中图片未加载完,则实现自定义小图标,图片加载完后进入真正内容
NULL 博文链接:https://1017401036.iteye.com/blog/2400794
jQuery实现图片预加载,些插件在jquery基础上进行封装。大家可以对插件进行修改。
通过图片预加载技术,使得图片加载更为流畅,和谐。当图片的大小比较大时,图片也可以自动调整宽度和高度,同时图片也能居中。
tempImg.src属性可以在后台加载这张图片到本地缓存实现预加载
手机页面预加载效果,一些预加载的效果!酷炫的加载效果
图片预加载插件---preload.js
瀑布流 图片预加载 实例
用jQuery实现图片预加载,内含jquery1.3的js
这时我们利用启动页或引导页或中间的广告页的时间来预加载webview,利用View.gone,View.visible来实现控件类的隐藏与显示,这样在启动后得到的主页就是一个已经加载好的页面了。此例中加载新浪这样的比较大的网站,...
NULL 博文链接:https://chen-miao.iteye.com/blog/1496730