基本效果同前一篇，业务有所变化：前一篇是先显示进度条待所有的图片加载完成了再显示图片，这一篇是先显示第一张图片然后依次加载其他图片（比较适合于有内容的图片，人在看第一张图片时程序默默的加载后面的图片）
然后还是那几句：
这个特效是跟着慕课网上的视频学的，视频链接如下：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>
2、CSS样式：
<style>
html,body{
margin: 0;
padding: 0;
}
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;
}
</style>
3、JS代码（附件中JS文件夹下demo2_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 len = imgs.length;//图片数量
var count=0;//加载到了第几张图片
var index = 0;//当前浏览到的第几张图片
$(function(){
load();//开始加载图片
//按钮的点击事件
$(".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]);
});
//有序加载图片
function load(){
var imgObj = new Image();
$(imgObj).bind("load error",function(){
if(count>=len){//说明图片加载完成了
}else{
load();//继续加载
}
count++;
});
imgObj.src = imgs[count];
}
});
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);
if(this.opts.order==='ordered'){//有序加载
this._ordered();//调用有序加载的方法
}else{
//无序方法:下划线表示这个方法只在内部使用，不提供外部调用
this._unordered();
}
}
//设置默认参数
PreLoad.DEFAULTS={
order:'unordered',//默认采用无序加载
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++;
});
});
};
//在原型上添加有序加载的代码
PreLoad.prototype._ordered=function(){
//预加载各张图片
var imgs = this.imgs,
opts = this.opts,
count = 0,
len = imgs.length;
load();
function load(){
var imgObj = new Image();
$(imgObj).bind("load error",function(){
opts.each && opts.each(count);
if(count>=len){//说明图片加载完成了
opts.all && opts.all();//若是有all就调用all()方法
}else{
load();//继续加载
}
count++;
});
imgObj.src = imgs[count];
}
};
//定义一个工具方法
$.extend({
preload:function(imgs,opts){
new PreLoad(imgs,opts);
}
});
})(jQuery);
//插件学习方法：
//无序加载：http://www.imooc.com/video/14434/0
//有序加载：https://www.imooc.com/video/14440
该有序加载的插件是在原来的无需加载插件的基础上改的，改动的主要有三个地方：
a、function PreLoad(中添加判断：
if(this.opts.order==='ordered'){//有序加载
this._ordered();//调用有序加载的方法
}else{
//无序方法:下划线表示这个方法只在内部使用，不提供外部调用
this._unordered();
}
b、PreLoad.DEFAULTS={中添加属性：order:'unordered',//默认采用无序加载
c、添加_ordered方法：
//在原型上添加有序加载的代码
PreLoad.prototype._ordered=function(){
//预加载各张图片
var imgs = this.imgs,
opts = this.opts,
count = 0,
len = imgs.length;
load();
function load(){
var imgObj = new Image();
$(imgObj).bind("load error",function(){
opts.each && opts.each(count);
if(count>=len){//说明图片加载完成了
opts.all && opts.all();//若是有all就调用all()方法
}else{
load();//继续加载
}
count++;
});
imgObj.src = imgs[count];
}
};
页面调用：第三步JS中“有序加载图片”的代码由原来的改成以下内容：
//使用插件加载图片
$.preload(imgs,{
order:'ordered'//使用有序加载
});
（PS：附件中的demo2(图片有序加载).html就是使用插件进行加载的）
最后，感谢老师，也祝大家好运！
相关推荐
【描述】：“左右滚动带箭头切换图片，易扩展的图片切换器”意味着这个实现不仅提供了基本的图片切换功能，而且设计得足够灵活，可以方便地进行功能扩展或自定义。这可能包括添加额外的交互效果，如过渡动画、自动...
6. **图片预加载**：在用户实际看到图片之前，JavaScript可以预先加载图片，减少页面加载时间，提高用户体验。 7. **图片网格动画**：当鼠标移动到图片网格上时，相关图片会触发动画，如淡入淡出、旋转等。 8. **...
6. **图片预加载**：为了避免在切换过程中出现延迟，可以预加载即将显示的图片，提高用户体验。 7. **性能优化**：使用WebP、JPEG2000等高效图片格式可以降低文件大小而不牺牲太多画质。同时，压缩图片以减少传输...
通过调整CSS样式和jQuery代码，可以进一步定制效果，如添加过渡动画、设置自动切换、增加预加载提示等，以满足不同项目的需求。 总之，这个资源为网页开发者提供了一种创新的图片展示解决方案，结合了不规则布局和...
8. **图片预加载**：预加载技术可以预先加载用户可能需要的图片，确保在用户交互时图片能快速显示。 9. **触摸事件支持**：对于移动设备，JS相册需要支持触摸事件，如滑动和捏合缩放，以提供自然的交互体验。 10. ...
二、图片预加载（Image Preloading） 为了提高用户体验，JavaScript可以用来预加载图片，确保用户在浏览时无需等待图片加载。预加载技术可以防止因图片加载延迟导致的页面空白，提升页面加载速度感。 三、图片缩放...
"图片轮播的好例子，带新闻标题和序号"是一个非常适合学习和实践的项目，它结合了图片切换、文字信息展示以及有序的展示逻辑。下面将详细解析这个项目的知识点。 首先，我们要理解图片轮播的基本原理。图片轮播通常...
在JavaScript中，可以通过定时器（setTimeout或setInterval）来设置图片切换的时间间隔，同时结合DOM操作（如appendChild、removeChild）来改变图片的位置。CSS3的transition和animation属性则可以实现平滑的过渡...
13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ...
此外，为了提高用户体验，还可以添加图片预加载技术，避免用户在浏览时等待加载。最后，良好的注释和使用说明对于初学者理解代码至关重要。 这个项目不仅展示了HTML和JavaScript在创建互动相册方面的潜力，也为...
30. 图片预加载：预先加载图片，避免用户在浏览时等待。 31. 视频播放器：自定义的视频播放界面，可能包含控制条、全屏选项等。 32. 图片画廊：支持缩略图预览和全屏查看的图片展示功能。 33. 网页图表：使用SVG...
当然，这只是一个基础示例，实际应用中可能需要考虑更多细节，如响应式布局、自适应屏幕大小、图片预加载、过渡动画效果优化等。此外，还可以根据需求添加控制按钮、自动播放开关等功能，以提供更好的用户体验。
例如，Lightbox或Fancybox插件可以轻松实现这种效果，包括图片预加载、缩略图导航等功能。 以上这些JavaScript实现的图片展示效果，不仅提升了网页的视觉效果，也增加了用户与网页的互动性。开发者可以根据实际需求...
8. **CSS预处理器**：虽然直接使用CSS编写焦点图特效是可能的，但使用Sass或Less等CSS预处理器可以使代码组织更有序，变量和混合（mixins）等功能也能提高代码复用性。 9. ** Accessibility**：考虑到无障碍性...
- 图片缓存：将预加载的图片URL存储在Redis中，浏览器请求图片时直接从缓存获取，提高响应速度。 - 缓存策略：根据需求设定缓存过期时间，保持数据新鲜度。 5. **性能优化**： - 图片压缩：使用工具预先压缩图片...
87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果...
87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果...
87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果...
此外，图片相册通常需要考虑的特性包括图片预加载、缩略图导航、全屏查看、滑动指示器等。 轮播，又称滑动广告或幻灯片，是一种动态展示多张图片或内容的组件。它常用于首页、产品展示、新闻更新等场景，以有限的...