最后更新于 .

最近在做系统的时候,遇到了一个瓶颈,即在列出所有素材的列表列表的时候,由于素材都是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:

1

flash:

2

附(所有源代码下载):
异步加载.zip

Pingbacks

Pingbacks已打开。

Trackbacks

引用地址

评论

  1. HJin_me

    HJin_me on #

    我觉得还可以再优化一下,只有当这个图片或者flash出现在浏览器窗口中的时候才加载。

    Reply

    1. Dante

      Dante on #

      呃,当前的代码就是出现在浏览器窗口中才加载哦,绑定了scroll方法来检测每次拖动之后,图片有没有被用户看到~~

      Reply

      1. HJin_me

        HJin_me on #

        jquery.lazyload.js 已经包括了这个功能了啊~~太好了,我也去试试~

        Reply

  2. zwwooooo

    zwwooooo on #

    jquery.lazyload.js挺不错,特别是图片多的博客

    Reply

    1. Dante

      Dante on #

      确实,不过绑定了scroll方法总感觉拖动的时候会一卡一卡的。。。当时是用几百个图片测试的。。。

      Reply

      1. zwwooooo

        zwwooooo on #

        有时网络不太通畅时,评论多时(头像)也会卡,如果是直接滚屏到底部就杯具鸟

        Reply

  3. adou

    adou on #

    scroll速度慢可能跟js拼接字符串的运算效率有关,试下用数组.join("")方法能不能好点。

    var arr_html = [];
    arr_html.push('&lt;object classid=&#039;);
    arr_html.push(&#039;&lt;param name=&quot;movie&quot; value=&#039;);
    //...
    arr_html.push(&#039;');
    $(element).html(arr_html.join(""));

    Reply

  4. jacklondon

    jacklondon on #

    浏览器加载图片、swf 本来就是异步的阿。只不过你需要先把每个图片、swf 的长宽在 html 中写明而已。

    Reply

    1. Dante

      Dante on #

      不是呀,是只有在浏览器可见窗口的图片会被展示。
      针对滚动条很长的页面做了优化。

      Reply

  5. 唐豆

    唐豆 on #

    那异步加载div块呢?是怎么实现的

    Reply

发表评论