JavaScript study notes one: jQuery writing method, image scaling and preloading

JavaScript study notes one: jQuery writing method, image scaling and preloading_jquery

WBOY

Release： 2016-05-16 17:52:20

Original

1282 people have browsed it

One of the JavaScript study notes: jQuery writing method, image scaling and preloading

In the past, when using JavaScript, I always wrote a few functions on the page, and basically did not consider the encapsulation and reuse of functions. Recently, there has been This project may have high requirements in this regard, so I researched encapsulation similar to jQuery.

Here, let’s try the effects of image scaling and preloading, and write similar JavaScript code.

The effect of image scaling and preloading is as follows (the preloading effect is sometimes not very obvious):

The main JS code is as follows:

Copy code The code is as follows:

 
(function() { 
var yQuery = (function() { 
var yQuery = function () { 
return yQuery.fn.init(); 
}; 
yQuery.fn = yQuery.prototype = { 
init: function() { 
return this; 
 }, 
//Image proportional scaling and preloading method declaration, but I feel that writing it like this (return new imgResizeBox(e)) is very awkward. Please let me know. 
imgResize: function(e) { 
return new imgResizeBox( e); 
} 
}; 
//image image processing
var imgResizeBox = function(e) { 
//image parameter
setting = { 
imgId: " ", //The ID of the image container, such as .viewArea img 
height: 0, 
width: 0, 
loading: "images/lightbox-ico-loading.gif" 
}; 
$.extend(setting, e, setting); //Parameter replacement
var images = $(setting.imgId); //Get all images
$(images).hide(); //Hide
var loading = new Image(); //Preload images 
loading.className = "loading"; 
loading.src = setting.loading; 
$(images).after(loading); 
//Preloading function 
var perLoading = function($this) { 
var img = new Image(); 
img.src = $this.src; 
if (img. complete) { 
computeImg.call($this); 
return; 
}; 
img.onload = function() { 
computeImg.call($this); 
img .onload = function() { }; 
}; 

}; 
//Picture scaling processing, and picture display function 
var computeImg = function() { 
var m = this.height - setting.height; 
var n = this.width - setting.width; 
if (m > n) 
this.height = this.height > setting.height ? setting .height : this.height; 
else 
this.width = this.width > setting.width ? setting.width : this.width; 
$(this).next(".loading") .remove(); 
$(this).show(); 
}; 
//Call the preloading function in a loop 
return $(images).each(function() { 
 perLoading(this); 
}); 
} 
return yQuery; 
})(); 
window.yQuery = window.$$ = yQuery(); 
}) (); 

The calling code is as follows:

Copy code The code is as follows:

 
$(document).ready(function() 
{ 
$$.imgResize({ imgId: ".viewArea img", height:160, width:270, loading: "http:// www.jb51.net/images/2012/155618/2012062710243954.gif" }); 
}); 

Finally, the simple source code is attached: jsDemo_jb51.rar