配合jquery实现异步加载页面元素
最近在做系统的时候,遇到了一个瓶颈,即在列出所有素材的列表列表的时候,由于素材都是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
建议继续学习:
- JQuery实现Excel表格呈现 (阅读:46516)
- 关于IO的同步,异步,阻塞,非阻塞 (阅读:14456)
- 分享一个JQUERY颜色选择插件 (阅读:12629)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9682)
- fsockopen 异步处理 (阅读:9016)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7750)
- jQuery的data()方法 (阅读:7573)
- jQuery性能优化指南 (阅读:7303)
- jQuery Color Animations颜色动画插件 (阅读:7069)
- 精于图片处理的10款jQuery插件 (阅读:6203)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:Dante 来源: Vimer
- 标签: jquery 异步
- 发布时间:2010-07-18 23:32:46
- [67] Go Reflect 性能
- [67] Oracle MTS模式下 进程地址与会话信
- [67] 如何拿下简短的域名
- [61] IOS安全–浅谈关于IOS加固的几种方法
- [60] 图书馆的世界纪录
- [59] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [47] 界面设计速成