The basic effect is the same as the previous one , but the business has changed: the previous one is to display the progress bar first and then display the pictures after all the pictures are loaded, this one is to display the first picture first and then load the other pictures in sequence (more suitable for For pictures with content, when people look at the first picture, the program silently loads the following pictures)
And then the words:
This special effect is learned from the video on the MOOC online. The video link is as follows: https://www.imooc.com/learn/502 The
source code and technical points have been uploaded to the attachment. You can view and download it if you need it.
The code is directly below (PS: The comments in the code are added based on personal understanding, not the teacher's original comments):
1. The basic structure of the page :
<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 :
<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 code (demo2_preload (ordered loading, non-plugin).js in the JS folder in the attachment):
//image array
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;//Number of pictures
var count=0;//Load the first few pictures
var index = 0;//The number of pictures currently browsed
$(function(){
load();//Start loading image
// button click event
$(".btn").click(function(){
if("prev"===$(this).attr("data-control")){//上一张
index--;//Subscript decrease
if(index<0) index = 0;
//index = Math.max(0,--index);//index first --, then the value obtained is compared with 0, and the larger value is returned
}else{//Next
index++;//The subscript increases
if(index>len-1){//array subscript starts from 0
index = len-1;
}
//index = Math.min(len-1,++index);
}
document.title=(index+1)+"/"+len;
$("#imgArea").attr("src",imgs[index]);
});
// load images in order
function load(){
var imgObj = new Image();
$(imgObj).bind("load error",function(){
if(count>=len){//Indicates that the image loading is complete
}else{
load();//Continue to load
}
count++;
});
imgObj.src = imgs[count];
}
});
4. Write the code for loading the image in the third step as a plug-in to call :
plug-in code (preload.js in the JS folder in the attachment):
// image preload
//Using closures to simulate local scope
/*
(function(){
})();
*/
//Pass in the jQuery object, use $ to receive, so that you can use jQuery
/*
(function($){
})(jQuery);
*/
(function($){
//Constructor
//imgs: image array
//options: parameter
function PreLoad(imgs,options){
//If the incoming image array is a string, manually convert it to an array
this.imgs = ((typeof imgs)==="string"?[imgs]:imgs);
//Replace the incoming options parameter with the default PreLoad.DEFAULTS, generate a new object, and return it to this.opts
this.opts = $.extend({},PreLoad.DEFAULTS,options);
if(this.opts.order==='ordered'){//Ordered loading
this._ordered();//Call the method of orderly loading
}else{
//Unordered method: The underscore indicates that this method is only used internally and does not provide external calls
this._unordered();
}
}
//set default parameters
PreLoad.DEFAULTS={
order:'unordered',//The default is unordered loading
each:null,//Execute after each image is loaded
all:null//Execute after all images are loaded
};
//Add out-of-order loading code to the prototype
PreLoad.prototype._unordered=function(){
//preload each image
var imgs = this.imgs,
opts = this.opts,
count = 0,
len = imgs.length;
$.each(imgs,function(i,src){
if(typeof src != "string"){ return ;}//Return directly not a string
var imgObj = new Image();
imgObj.src = src;
//Execute this method for normal loading or loading failure to avoid the problem of "the page always displays loading data when loading fails"
$(imgObj).bind("load error",function(){
opts.each && opts.each(count);
//When the image preload is complete, display the information of the first image
if(count>=len-1){
//display image
opts.all && opts.all();//If there is all, call the all() method
}
count++;
});
});
};
//Add orderly loading code to the prototype
PreLoad.prototype._ordered=function(){
//preload each image
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){//Indicates that the image loading is complete
opts.all && opts.all();//If there is all, call the all() method
}else{
load();//Continue to load
}
count++;
});
imgObj.src = imgs[count];
}
};
//define a utility method
$.extend({
preload:function(imgs,opts){
new PreLoad(imgs,opts);
}
});
})(jQuery);
//Plug-in learning method:
//Out-of-order loading: http://www.imooc.com/video/14434/0
//Ordered loading: https://www.imooc.com/video/14440
The orderly loaded plug-in is modified on the basis of the original no-loading plug-in. There are three main changes:
a. Add judgment in function PreLoad(:
if(this.opts.order==='ordered'){//Ordered loading
this._ordered();//Call the method of orderly loading
}else{
//Unordered method: The underscore indicates that this method is only used internally and does not provide external calls
this._unordered();
}
b. Add property in PreLoad.DEFAULTS={: order:'unordered',//The default is unordered loading
c. Add the _ordered method:
//Add orderly loading code to the prototype
PreLoad.prototype._ordered=function(){
//preload each image
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){//Indicates that the image loading is complete
opts.all && opts.all();//If there is all, call the all() method
}else{
load();//Continue to load
}
count++;
});
imgObj.src = imgs[count];
}
};
Page call: The code of "orderly loading pictures" in the third step JS is changed from the original to the following:
//Use the plugin to load the image
$.preload(imgs,{
order:'ordered'//Use ordered loading
});
(PS: demo2 in the attachment (images are loaded in order). html is loaded using plugins)
Finally, thank you teachers, and good luck to everyone!