Let’s talk about javascript image preloading technology again (detailed demonstration)_javascript skills

The preloading technology mentioned in this article mainly allows JavaScript to quickly obtain the size of the image header data.

A typical example of using preloading to obtain the image size:

Copy the code The code is as follows:

var imgLoad = function (url, callback) {
var img = new Image();
img.src = url;
if (img.complete) {
callback (img.width, img.height);
} else {
img.onload = function () {
callback(img.width, img.height);
img.onload = null;
};
};
};

You can see that using onload requires waiting for the image to be loaded, and its speed cannot be complimented.
Web applications are different from desktop applications, and response speed is the best user experience. If you want both speed and elegance, you must obtain the image size in advance. How can you obtain the image size before the image is loaded?
More than ten years of Internet experience tells me: when the browser loads images, you will see that the images will first occupy a piece of land and then slowly load, and most of the images here do not have preset width and height. Attribute, because the browser can obtain the header data of the image. Based on this, you only need to use javascript to regularly detect the size status of the image to know the image size ready status.
Implementation code (updated on 2011-03-11):
2011-03-12 updated:
Only use a certain timer to optimize performance

Copy code The code is as follows:

/*!
* img ready v0.3
* http://www .planeart.cn/?p=1121
* TangBin - MIT Licensed
*/
// Image header data loading ready event
// @param {String} image path
// @param {Function} The callback function for getting the size (parameter 1 receives width; parameter 2 receives height)
// @param {Function} The callback function for loading errors (optional)
(function () {
var list = [], intervalId = null,
tick = function () {
var i = 0;
for (; i < list.length; i ) {
list[i ].end ? list.splice(i--, 1) : list[i]();
};
!list.length && stop();
},
stop = function () {
clearInterval(intervalId);
intervalId = null;
};
this.imgReady = function (url, callback, error) {
var check, end, width, height , offsetWidth, offsetHeight, div,
accuracy = 1024,
doc = document,
container = doc.body || doc.getElementsByTagName('head')[0],
img = new Image ();
img.src = url;
if (!callback) return img;
// If the image is cached, return the cached data directly
if (img.complete) return callback( img.width, img.height);
// Insert a secret image into the page to monitor whether the image takes up space
div = doc.createElement('div');
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
div.appendChild(img)
container.appendChild(div);
width = img.offsetWidth;
height = img.offsetHeight;
// Completely loaded event
img.onload = function () {
end();
callback( img.width, img.height);
};
// Event after loading error
img.onerror = function () {
end();
error && error() ;
};
// Check whether the image has been occupied
check = function () {
offsetWidth = img.offsetWidth;
offsetHeight = img.offsetHeight;
if (offsetWidth !== width || offsetHeight !== height || offsetWidth * offsetHeight > accuracy) {
end();
callback(offsetWidth, offsetHeight);
};
};
check.url = url;
// Clean up after the operation is completed
// Delete elements and events to avoid IE memory leaks
end = function () {
check.end = true;
img.onload = img.onerror = null;
div.innerHTML = '';
div.parentNode.removeChild(div);
};
// Will detect whether the image is a placeholder The function is added to the timer queue for regular execution
// Only one detector is added to the same picture
// Only one timer is allowed to appear at any time to reduce browser performance loss
!check.end && check( );
for (var i = 0; i < list.length; i ) {
if (list[i].url === url) return;
};
if ( !check.end) {
list.push(check);
if (!intervalId) intervalId = setInterval(tick, 150);
};
};
})() ;

Isn’t it very simple? The speed of obtaining photographic-level photo sizes in this way is often dozens of times that of the onload method, and it can achieve a flash sale effect for ordinary web browsing-level pictures (within 800×600).
Okay, please watch the delightful DEMO: http://demo.jb51.net/js/2011/imgready/
(Tested browsers: Chrome, Firefox, Safari, Opera, IE6, IE7, IE8)
From:: Tang Bin