Lập trình - Áo Hai Dây

Why is preloading important?

Web applications tend to involve a multitude of background images for elements and states that aren't in view when the page loads. In traditional web apps these images are used for rollover states for links and buttons, but Ajax applications have expanded the list to include images for inline messaging, tooltips, toggled content, overlay panels, and even entire pages of content that could potentially wind up in an interface. In order to create a snappy desktop-like experience on the web, images must be preloaded so that there is no blinking or fragmented loading. We found that our current options for preloading images were both insufficient and time-consuming, and it was clear that we needed to find a new approach.

How preloading is usually done

Developers tend to employ a couple of common practices:

• CSS Sprites: Combine all states of an image (default, rollover, active) into a single image file and use CSS to position and crop it into place. While this solves the problem of preloading image states that aren't visible when the page first loads, it doesn't address how to preload background images that appear when new content is loaded via Ajax.
• Using JavaScript to create image objects from filenames: Create an array of background-image filenames that need preloading, then loop through that array to create an image object for each image file. This ensures that images are cached and ready for later use, but often the number of images required in a complex Ajax application can be up to 50, 100, or more. On top of that, inevitable design changes throughout a development process mean constantly updating and adding file paths, which would lead most developers to simply not do it.

A typical array of images for preloading with JavaScript:

var imagesToLoad = ['image1.gif', 'image2.gif', 'image3.gif', 'etc...'];

How is this script different?

Our script parses through linked and imported stylesheets and creates an array of all the image urls they contain. Then it loops through the array of urls and creates an image object for each one so they'll be cached and ready for later use. Sound familiar? That's because it's nearly the same as the traditional JavaScript approach, but with the major added advantage of automation. Using this script means we only have to worry about specifying background images and states in our CSS files, and the script takes care of the rest.

Take it straight from the source:

/*
 * --------------------------------------------------------------------
 * jQuery-Plugin "preloadCssImages"
 * by Scott Jehl, scott@filamentgroup.com
 * http://www.filamentgroup.com
 * reference article: http://www.filamentgroup.com/lab/automated_image_preloading/
 * demo page: http://www.filamentgroup.com/examples/preloadImages/
 *
 * Copyright (c) 2008 Filament Group, Inc
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
 *
 * Version: 1.0, 31.05.2007
 * Changelog:
 * 	02.20.2008 initial Version 1.0
 * --------------------------------------------------------------------
 */
$.preloadCssImages = function(settings){
	//overrideable defaults
	settings = jQuery.extend({
		 imgDir: 'images'
	}, settings);

	//dump all the css rules into one string
	var sheets = document.styleSheets;
	var cssPile = '';
	for(var i = 0; i0 && imgUrls != ''){//loop array
		var arr = jQuery.makeArray(imgUrls);//create array from regex obj
		$(arr).each(function(k){
			allImgs[ k ] = new Image(); //new img obj
			allImgs[ k ].src = settings.imgDir +'/'+ this;
		});
	}
	return allImgs;
}

How do I use it?

Paste the code above into your JavaScript file and run $.preloadCssImages() when the DOM is ready. Don't forget that you'll also need to reference the jQuery javascript library in your page. By default, the script assumes a root directory called 'images'. This default directory can be overridden by passing a different imgDir value to the settings object like so: $.preloadCssImages({ imgDir: 'myImagesDirectory' });

Download preloadCssImages.jQuery.js

This script is a jQuery plugin, meaning is is dependant on the incredible jQuery javascript library. If you feel particularly adventurous, this script could be easily ported to another library or written in plain old JavaScript as well. Feel free to grab the script and try it for yourself. We're always looking for ways to improve our scripts, so if you encounter any issues or have any questions or suggestions please leave a comment below.

Future plans for preloadCssImages.jQuery.js

Currently this plugin assumes that all images are held in a single directory. Down the road, we would like to extend the script so that image paths are worked out in relation to the location of the CSS file, enabling images to be loaded from different directories on a server.

minh.tran Javascript, Lập trình web, jQuery http://www.filamentgroup.com/lab/automated_image_preloading_for_a_snappy_ui/

Ðược xem 1105 lần, 1 hôm nay