Home Web Front-end JS Tutorial JavaScript study notes one: jQuery writing method, image scaling and preloading_jquery

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

May 16, 2016 pm 05:52 PM
Preloading

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
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to handle image caching and preloading in Vue? How to handle image caching and preloading in Vue? Aug 25, 2023 pm 04:21 PM

How to handle image caching and preloading in Vue?

How does Vue implement lazy loading and preloading of components? How does Vue implement lazy loading and preloading of components? Jun 27, 2023 pm 03:24 PM

How does Vue implement lazy loading and preloading of components?

UniApp design and development skills for image processing and preloading UniApp design and development skills for image processing and preloading Jul 04, 2023 pm 05:45 PM

UniApp design and development skills for image processing and preloading

How to use Vue to implement image preloading? How to use Vue to implement image preloading? Jun 25, 2023 am 11:01 AM

How to use Vue to implement image preloading?

How to handle lazy loading and preloading of image resources in Vue technology development How to handle lazy loading and preloading of image resources in Vue technology development Oct 09, 2023 am 09:45 AM

How to handle lazy loading and preloading of image resources in Vue technology development

How to preload pictures along the way in Amap How to preload pictures along the way in Amap Mar 01, 2024 pm 12:58 PM

How to preload pictures along the way in Amap

How to enable preloading in Edge browser? How to enable web page preloading function in Edge browser How to enable preloading in Edge browser? How to enable web page preloading function in Edge browser Mar 14, 2024 pm 03:10 PM

How to enable preloading in Edge browser? How to enable web page preloading function in Edge browser

How to enable preloading web pages in 360 Browser How to enable preloading web pages in 360 Browser Jan 30, 2024 pm 11:06 PM

How to enable preloading web pages in 360 Browser

See all articles