Based on YUI3 Taobao style "picture lazy loading" component

Articles for surreykong original and reproduced to specify the source, from the http://surrey.javaeye.com

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);
        };
        asyncScrollLoader.NAME='asyncscrollloader';
        asyncScrollLoader.ATTRS={};
        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) {
                                self._delayLoader();
                        });
                },
                renderUI : function() { // When setting up rendering UI is  , That is, testing and analysis in the second case  : The browser refresh record scroll position  .
                        this._delayLoader(true);
                },
                _getNextNode : function() { // Get does not load the next node
                        var selector = this.delayLoadElementName+'.'+this.delayLoadClass;
                        var node = Y.one(selector);
                        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 {
                                return;
                        }
                        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',
                        requires:['widget']
                }
}}).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  -->
(<)textarea>

<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>

(</)textarea>
分类:Web 时间:2008-09-11 人气:303
分享到:
blog comments powered by Disqus

相关文章

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.368 (s). 10 q(s)