Heluyao's Blog » 插件

imglazyload图片延迟加载(jQuery)

heluyao — Mon, 20 Jun 2011 12:13:26 +0000

这个小效果还是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

wordpress升级2.9要小心

heluyao — Tue, 29 Dec 2009 03:19:21 +0000

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

给Dreamweaver安装jQuery插件jQuery_API.mxp

heluyao — Thu, 10 Sep 2009 07:36:55 +0000

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

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

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

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