PJBlog增加图片lazyload效果

在这里以我修改PJblog实现图片缓载为例说明：

第一步：在common\function.asp文件中找到Function UnCheckStr(ByVal Str)函数，在第一个End if（约623行）后加入：

Str = Replace(Str,"img src="images/grey.gif" data-url="images/grey.gif" data-url=","img src="images/grey.gif" data-url="images/grey.gif" data-url="images/grey.gif" data-url=",1,-1,1)

意思是把src替换成占位图地址，data-url设置成真实图片地址。这个方法的优点是简单快捷。缺点也很多，如下：

1）只是简单地将img src替换，如果图片未按img src的顺序来写，这里就没法替换；
2）相关日志无法点击第2页及以后的页面，不清楚是不是jQuery与Ajax冲突；
3）UBB代码不能替换；
4）如果侧边栏有javascript的广告代码，这里可能会将侧边栏采用script的广告位src给替换了，造成不能显示；

可以单独写一个函数，例如下面的RepLasyloadStr，把替换img的代码放在里面。然后在class\cls_default.asp和cls_article.asp两个文件中把文章显示的部分加上这个替换函数。这样可以解决3）4）的问题，但是1）2）的问题还是没有解决。不用改太多代码的话如果大家有什么好方法可以说一下。

Function RepLazyloadStr(ByVal Str)  
    If IsNull(Str) Then  
        RepLazyloadStr = ""  
        Exit Function  
    End If  
    Str = Replace(Str,"img src=","img src="images/grey.gif" data-url=",1,-1,1)  
    'Str = Replace(Str,"src=","src="images/grey.gif" data-url=",1,-1,1)  
    RepLazyloadStr = Str  
End Function

第二步：在foot.asp文件中</body>前加入如下代码，引入jquery和lazyload插件，并初始化：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" charset="utf-8" ></script>  
<script src="common/jquery.lazyload.js" type="text/javascript" charset="utf-8" ></script>  
<script type="text/javascript" charset="utf-8">  
      $(function() {  
          $("img").lazyload();  
      });  
</script>

第三步：将jquery.lazyload.js插件和grey.gif放入网站中的某个文件夹。加载成功。

■下载地址

jQuery.Lazyload.js源文件下载  |  Mini版下载 。 已测试兼容Safari 5.1, Safari 6, Chrome 20, Firefox 12 for OSX； Chrome 20+, IE 8 and IE 9, Firefox 13+ for  Windows； Safari 5.1 on iOS 5 for iPhone and iPad；Chrome for Android。

■ 已知问题

IE8及以下好像不能加载，图片无法显示。如果你又发现新的问题请提交评论，谢谢。

■ 参考资料：

jQuery.LazyLoad官方网站
jQuery滚动加载插件scrollLoading
图片延迟加载的实现
Javascript图片的懒加载与预加载，用户体验与服务器压力之间的平衡
Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件

WordPress的lazyload插件

流浪天下本站安装的插件是基于jQuery.sonar的lazyload插件
maie于2013-05-23补充