Picture preloading learning (1): picture switching of disorderly loading

Let's take a picture of the basic effect first: the

picture is a blind search on Baidu, everyone can make it.

Then let’s talk about this business: a progress bar is displayed when the page is opened, which is “the progress information of all images loaded”, and the effect of the above image will be displayed after all the images are loaded.

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>

<!-- Loading prompt box -->
<div class="loading">
	<p class="progress">0%</p>
</div>

2. CSS style :

<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 code (demo1_preload (unordered 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 index = 0,len = imgs.length,count=0;
//alert(document.documentElement.clientHeight);//Get the height of the page
$(function(){
	var $progress = $(".progress");
	//preload each image
	$.each(imgs,function(i,src){
		var imgObj = new Image();
		imgObj.src = src;
		// load normally
		$(imgObj).bind("load error",function(){
			//alert((count+1)+"\n"+len+"\n"+(count+1)/len);
			$progress.html(Math.round((count+1)/len*100)+"%");
			//When the image preload is complete, display the information of the first image
			if(count>=len-1){
				//display image
				$(".loading").hide();//Hide
				document.title="1/"+len;
			}
			count++;
		});
	});
	
	// 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]);
	});
});

4. Write the code for loading the image in the third step as a plug-in to call :

Plugin 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);
		
		//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={
		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++;
			});
		});
	};
	
	//define a utility method
	$.extend({
		preload:function(imgs,opts){
			new PreLoad(imgs,opts);
		}
	});
})(jQuery);

//Plug-in learning method: http://www.imooc.com/video/14434/0

Page call: The code for "preloading each image" in the third step JS is changed from the original to the following:

//preload each image
$.each(imgs,function(i,src){
	var imgObj = new Image();
	imgObj.src = src;
	// load normally
	$(imgObj).bind("load error",function(){
		//alert((count+1)+"\n"+len+"\n"+(count+1)/len);
		$progress.html(Math.round((count+1)/len*100)+"%");
		//When the image preload is complete, display the information of the first image
		if(count>=len-1){
			//display image
			$(".loading").hide();//Hide
			document.title="1/"+len;
		}
		count++;
	});
});

(PS: demo1 in the attachment (images are loaded out of order). html is loaded using plugins)

Finally, thank you teachers, and good luck to everyone!

Picture preloading learning (1): picture switching of disorderly loading

Guess you like