jQuery实现网页图片滚动显示(延迟加载)

09 17, 2012学习已有 225,334 次围观

本文最后更新于2014年3月29日，已超过半年没有更新，如果内容失效，请在评论区反馈，谢谢！

Table of content

PJBlog增加图片lazyload效果
■下载地址
■ 已知问题
■ 参考资料：
WordPress的lazyload插件

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。