Gallery
Documentation
Tag Cloud
Santhosh Nageshwar Rao
YUI Contributor
Last CDN Push: 05/12/11
Build Tag: gallery-2011.05.12-13-26
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.
This module helps to load the images which need not be shown while loading to be downloaded after the page is loaded and module will require bare minimal configuration.
The Module loads the Images on demand. and has two functions 'processAfterLoad()' and 'processnow()'.
Its takes only two parameter both are optional, first param is a selector which can be any valid selector which can match up until the parent of the Image tag that need to be loaded on demand.
if the selector in not provided, all the images of the document will be scanned.
The second param is a custom attribute name. to use the default attribute replace src for the image tag with data-src and incase if you need to give a different name you can pass that name as second param to the function.
Configuration
Using this module will be very simple,
A regular image html would be as follow
<img src="someimageurl" />
Tweak this a little, an image that needed to be lazyloaded should use the code below
<img data-src="someimageurl" />
To load those Image after the page is loaded, use the code below
<script type="text/javascript">
YUI({gallery: "gallery-2011.04.27-18-16"}).use("node",function(Y){
Y.use("gallery-lazyloadimages",function(Y){
Y.LazyloadImages.processAfterLoad();
});
});
</script>
Simple isnt it :)
Code Sample
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>LazyLoadImages - YUI Gallery Module Example</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Santhosh Babu Nageshwar Rao"><!-- Date: 2011-02-15 -->
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-debug.js"></script>
<script type="text/javascript" src="../../../build/gallery-lazyloadimages/gallery-lazyloadimages-debug.js"></script>
</head>
<body class="yui3-skin-sam">
<h3>LazyLoadImages - YUI Gallery Module Example</h3>
<div id="someid">
<div>The image should below will be loaded immediately...</div>
<img data-src="http://www.interweb.in/attachments/pc-wallpapers/16215d1222951905-nature-photos-wallpapers-images-beautiful-pictures-nature-444-photos.jpg" width="100" height="100" border="1px"/>
</div>
<div>
<div>The image will be loaded after the page is loaded...</div>
<img data-src="http://www.interweb.in/attachments/pc-wallpapers/16216d1222951929-nature-photos-wallpapers-images-beautiful-pictures-nature-beautiful-photo-555.jpg" border="1px"/>
</div>
<script type="text/javascript">
YUI({gallery: "gallery-2011.04.27-18-16"}).use("node",function(Y){
Y.use("gallery-lazyloadimages",function(Y){
//To lazy load images within a selector
//Y.LazyloadImages.processnow("#someid");
// To lazy load all images with custom src attribute
//Y.LazyloadImages.processAfterLoad("","attrname");
// To lazy load all images after page load.
Y.LazyloadImages.processAfterLoad();
});
});
</script>
</body>
</html>
Forum Posts
No forum posts for this module.
© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info