#干货向#配合jquery实现异步加载页面元素

在这里http://blogread.cn/it/article/1966?f=footerrecommend 看到的

放到这里，以后也可以常常看看

最近在做系统的时候，遇到了一个瓶颈，即在列出所有素材的列表列表的时候，由于素材都是swf或者jpg，结果几百个文件的时候，就会导致页面加载极慢，老大说让做成异步加载，于是就改了一下。注：本人js很差，献丑了…… 
其实这种异步加载元素的方式无非就是在原有的HTML上置一个标记，然后等最新的数据到来的时候替换掉它。 
在网上搜了一下，很多人推荐一个叫做jquery.lazyload.js的插件，能够支持图片的异步加载，使用方法也比较简单，在header里面写：

<script type="text/javascript" src="jquery.lazyload.js"></script> 
$(document).ready(function(){ 
    $("img").lazyload({ 
        placeholder : "grey.gif", 
        effect : "fadeIn" 
    }); 
});

这样图片异步加载确实解决了，但是swf的渲染看来只能自己来写了。这里用span来存储swf的url，等到需要渲染的时候，再将span内部渲染出flash来，代码如下（其实就是仿照jquery.lazyload.js写的，甚至直接copy了函数）：

<script type="text/javascript" charset="utf-8"> 
    var threshold = 0; 
    $.belowthefold = function(element) { 
        var fold = $(window).height() + $(window).scrollTop(); 
        return fold <= $(element).offset().top - threshold; 
    }; 
     
    $.rightoffold = function(element) { 
        var fold = $(window).width() + $(window).scrollLeft(); 
        return fold <= $(element).offset().left - threshold; 
    }; 
         
    $.abovethetop = function(element) { 
        var fold = $(window).scrollTop(); 
        return fold >= $(element).offset().top + threshold  + $(element).height(); 
    }; 
     
    $.leftofbegin = function(element) { 
        var fold = $(window).scrollLeft(); 
        return fold >= $(element).offset().left + threshold + $(element).width(); 
    }; 
    $.appear = function(element) { 
        if($(element).attr('class')=='lazyload' && $(element).html().indexOf('object',0)==-1) 
        { 
        var outhtml = ''; 
        outhtml += '<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="60" height="60">  '; 
        outhtml += '<param name="movie" value="'+$(element).attr('src')+'"/>  '; 
        outhtml += '<param name="quality" value="high"/>  '; 
        outhtml += '<param name="bgcolor" value="#FFFFFF"/>  '; 
        outhtml += '[>[if !IE]><<]  '; 
        outhtml += '<object data="'+$(element).attr('src')+'" width="60" height="60" type="application/x-shockwave-flash">  '; 
        outhtml += '<param name="quality" value="high"/>  '; 
        outhtml += '<param name="bgcolor" value="#FFFFFF"/>  '; 
        outhtml += '<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer"/>  '; 
        outhtml += '</object>  '; 
        outhtml += '[>><![endif]<]  '; 
        outhtml += '</object> '; 
        $(element).html(outhtml); 
        } 
    };  
    jQuery(document).ready( function($){ 
            elements = $("span"); 
            $(window).scroll( function(){ 
                elements.each(function () { 
                    if ($.abovethetop(this) || 
                        $.leftofbegin(this)) { 
                            /* Nothing. */ 
                    } else if (!$.belowthefold(this) && 
                        !$.rightoffold(this)) { 
                        $.appear(this) 
                        this.loaded = true; 
                        var temp = $.grep(elements, function(element) { 
                            return !element.loaded; 
                        }); 
                        elements = $(temp); 
                    } else { 
                    } 
                });  
            }); 
            $(window).trigger('scroll');  
    }); 
</script>

而保存swf url的页面代码即(为配合演示，所以加了woaini几个字母)：

<span class='lazyload' src='1.swf' type='2'>  
woaini 
</span>

效果还是不错的，抓屏如下： 
img：

flash：

附（所有源代码下载）： 
异步加载.zip