Based on YUI3 Taobao style "picture lazy loading" component

Articles for surreykong original and reproduced to specify the source, from the

First of all allow me to F * CK CSDN's blog, I do not know of any problems in the case of the letters of my blog, even the ass are all about letting go, chased back a receipt for it! Ah not as good as the even chased!

Taobao Open the home page and most of the search, the Merchandise page, wait for first screen loaded, this time pin down the browser scroll bar drag quickly, if your speed is not quick enough, but moves fast enough, then (*_*) , will see a picture will be a one revealed, rather than as an ordinary page to request a one-time when the page loaded.

Open Firefox, open the firebug's network monitoring can be seen, when the first screen page is loaded, simply drag the browser's scroll bar to a certain location, a new request will be sent.

1. Image content lazy loading advantages and disadvantages.

Advantage is that if a page has a large number of image content, and users are not necessarily all to see (for example: only browse the contents of the first screen), 1. Can effectively reduce the browser's memory consumption 2. To reduce the pressure on servers and bandwidth consumption .

The disadvantage is that if the browser does not support or turned off javascript, will not see the need to defer the loading content.

2. Lazily technical analysis of image content.

Put a picture on the label of the HTML tags inside the textarea as a value, or as a HTML comment, so that the browser can skip the analysis of the HTML, images also will not be loaded.

In the pictures to load, only through DOM operations, the processed HTML taken out as the designated region, innerHTML, you can make an immediate interpretation of the HTML browser, and load one of the media / image content.

One loading condition is a trigger image. When the page scroll 2. Refreshes the browser stuck in scroll position.

3. YUI3 realization

Component-based code.
// Define the package name  

var package = {};

YUI.add('asyncScrollLoader', function(Y) {
        var asyncScrollLoader = function(config){
                asyncScrollLoader.superclass.constructor.apply(this, arguments);
        Y.extend(asyncScrollLoader, Y.Widget, {
                initializer : function(config) {
                           // Hold the delay-load HTML content label name  ,  There should be a textarea  
                        this.delayLoadElementName = config.elementName;
                           // Label class  
                        this.delayLoadClass = config.clsName;
                           // Hold the delay-load HTML content label property  , There should be a value  
                        this.contentAttribute = config.contentAttribute;
                bindUI : function() {
                        var self = this;
                           // Defines when the page scrolls  , Testing needs to load the location  
                        Y.on('scroll', function(ev) {
                renderUI : function() { // When setting up rendering UI is  , That is, testing and analysis in the second case  : The browser refresh record scroll position  .
                _getNextNode : function() { // Get does not load the next node  
                        var selector = this.delayLoadElementName+'.'+this.delayLoadClass;
                        var node =;
                        return node;
                _delayLoader : function(isPageInitScroll) {                     
                        var viewportHeight = Y.DOM.winHeight(), // The current height of the window  
                                scrollHeight = Y.DOM.docScrollY(), // The current vertical scroll position  
                                viewbottom = viewportHeight + scrollHeight,// The current window, the vertical coordinates  
                                currentNode = this._getNextNode(); 
                        if (currentNode==null) {this._delayLoader=function(){};return;}// When all nodes have been loaded at the conclusion of the  , That is an empty function  .

                        if (viewbottom>=currentNode.getY()) { // The current window, the vertical coordinate is greater than or equal to is not loaded when the vertical position of the node  , Loading content  .
currentNode.get('parentNode').replaceChild(Y.Node.create(currentNode.get(this.contentAttribute)), currentNode);
                        } else {
                        var self = this;
                            // Delay loading 100 milliseconds  , Avoid multiple detection DOM  
                        if (isPageInitScroll) {setTimeout(function(){self._delayLoader(true);},100);}

        package.asyncScrollLoader = asyncScrollLoader;
}, '1.0.0', {requires: ['widget']});

Call Code:
YUI({modules:{'asyncScrollLoader': {
                fullpath: 'asyncScrollLoader.js',
                        type: 'js',
}}).use('widget','asyncScrollLoader', function(Y){
    Y.on('domready', function() {
        var cfg = {
            'elementName' : 'textarea',
            'clsName'     : 'class1',
            'contentAttribute' : 'value'
        new package.asyncScrollLoader(cfg).renderer();

HTML code:
<!--  It seems that the editor does not support dropping textarea to  () Get rid of it  -->

<div><img src="asdf1.jpg" mce_src="asdf1.jpg" alt="" /></div>

<div><img src="asdf2.jpg" mce_src="asdf2.jpg" alt="" /></div>

<div><img src="asdf3.jpg" mce_src="asdf3.jpg" alt="" /></div>

<div><img src="asd4f.jpg" mce_src="asd4f.jpg" alt="" /></div>

<div><img src="asdf5.jpg" mce_src="asdf5.jpg" alt="" /></div>

<div><img src="a6sdf.jpg" mce_src="a6sdf.jpg" alt="" /></div>

<div><img src="a7sdf.jpg" mce_src="a7sdf.jpg" alt="" /></div>

<div><img src="as8df.jpg" mce_src="as8df.jpg" alt="" /></div>

<div><img src="asd9f.jpg" mce_src="asd9f.jpg" alt="" /></div>

<div><img src="asdf10.jpg" mce_src="asdf10.jpg" alt="" /></div>

<div><img src="11asdf.jpg" mce_src="11asdf.jpg" alt="" /></div>

  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of Based on YUI3 Taobao style "picture lazy loading" component

  • Practical Rails plug-ins

    Editor article FCKeditor #undefined method `relative_url_root' for #<ActionController::CgiRequest:0x23b026> #There is been a Fix for Rails 2.2 #in the file app/controllers/fckeditor_controller.rb #look for uploaded = request.relative_url_root.to_s+"

  • Ruby implementation from their own single-mode Example Insider Secret Ruby module

    Ruby implementation from their own single-mode Example Insider Secret Ruby module Abstract Through my own implementation of the Singleton module implementation of the Ruby Example of single-mode. Explain in detail my own implementation of the Singlet ...


    function delHtmlTag (str) ( return str.replace (/<[^>]+>/ g ,"");// remove all html tags )

  • Mootools prospects? Used repeat-invent the wheel and VS

    Period of time did not come, have been busy the bottom of the application development, Web client instead of less. JS would like to say something about Mootools framework and words. To see the major sites include Javaeye mainstream technology, there ...

  • Basic knowledge of CSS

    In this paper, the source for the original Near the time for the preparation of CSS Reference Manual First, with regard to CSS style sheets 1. In the study before css What you should master the basic knowled

  • javascript form

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>formUtil.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="thi

  • haproxy should not keep an accurate record of the client IP,

    Apache + HAProxy a server (A) Rails App two servers (B, C) version = 2.0.4 Medium production.log suddenly discovered some time ago only shows haproxy of IP. And should not show the real client ip However, in / etc / haproxy.cfg has been annotated Ini ...

  • extjs development environment set up and practice

    1, download and extract the extjs 2, download eclipse and Eclipse AJAX Toolkit Framework (ATF) I have been accustomed to using eclipse as a development environment, a variety of open-source plugin so that eclipse has all-around performance, operating effi

  • IBM Ajax Tutorial Series

    Links: Part 10: Using JSON for data transmission In the asynchronous application to send and receive information, you can choose to plain text and XML as data format. Ajax grasp of this issue ...

  • Application of spring struts2.0 hibernate HQL

    Therefore, in the development of statistical inquiry system, as far as possible through the use of select statement to write the required query property way back relational data, and avoid using the first query return persistent object (in this way are in

blog comments powered by Disqus
Recent Entries
Tag Cloud
Random Entries