博客 - 标签:插件

imglazyload图片延迟加载(jQuery)

2011-06-20 下午 - JS/Ajax/AS - -

这个小效果还是3个月前写的,太忙,一直没空更新blog,刚好有点空闲,抽出来简单弄弄了~

container容器,attr属性,timeout延时。这些都可以有自己灵活控制的!原理简单不过了,图片先不设置src属性,浏览器就不会产生请求,监听起滚动条和窗口大小的事件,通过判断图片是否处于当前可视区域(offset的left和top方向分别小于scrollTop+clientHeight和scrollLeft+clientWidth)来控制图片是否显示,显示则设置img对象的src属性为标签中自定义属性的值!

主要代码

this.container = $(this.options.container);
this.imgNum = this.container.find('img['+ this.options.attr +']');
var _this = this;
if(this.imgNum.length){
    
this.timer&&clearTimeout(this.timer);
    
this.timer = setTimeout(function(){
        
var arr = [],gc = _this.getClient();
        $.
each(_this.imgNum,function(i,o){
            
if($(o).offset().top <= gc.top && $(o).offset().left <= gc.left){
                
var attrval = $(o).attr('lazysrc');attrval&&$(o).attr('src',attrval).removeAttr('lazysrc').hide().fadeIn();
            
}else{
                
arr.push(o);
            
}
        
});
        
_this.imgNum = arr;
    
},this.options.timeout);
}else{
    $
(window).unbind('scroll',this.check);
    $
(window).unbind('resize',this.check);
}

返回当前屏幕显示范围

return{'top':document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop),'left':document.documentElement.clientWidth+Math.max(document.documentElement.scrollLeft,document.body.scrollLeft)};

demo展示:http://www.11gz.com/demo/js-ajax/imglazyload.html

No Comments »

wordpress升级2.9要小心

2009-12-29 上午 - thinking - -

wordpress又出新版本了,2.9全新亮相了。如果你的blog准备升级,那么要小心了。有插件可能不兼容了。前几日我将Blog升级到2.9的时候就遇到两个插件不兼容,一个是“中文 WordPress 工具箱”,另一个是Simple Tags。前者导致页面直接跑出错误,不能正常访问,后者貌似只是在后台写新文章时不能填写标签。所以还是要谨慎了,哈哈~~~不知是否仅仅我个人碰到如此问题!总之记得备份文件和数据库,以防万一吧!

1 Comment »

给Dreamweaver安装jQuery插件jQuery_API.mxp

2009-09-10 下午 - JS/Ajax/AS - - -

要让Dreamweaver支持jQuery自动提示代码功能,方法很简单,下载一个插件—jQuery_API.mxp[点击下载]。

在Dreamweaver里依次选择“命令” -> “扩展管理” -> “安装扩展” -> …,就会自动安装了。

成功后重启Dreamweaver,就大功告成了。

注意:如果您安装的是精简版的Dreamweaver,那么请先下载Adobe Extension Manager 插件管理器[点击下载],我自己是cs3的,因此该处链接也是适用于cs3,请根据自己相应版本选择下载。

6 Comments »