返回论坛首页联系我们论坛帮助
>> 网页设计交流,相互学习,共同进步……
搜一搜相关精彩主题 
泥客论坛(十几年前的回忆)泥客技术☆网页制作☆ → JS实现网页图片延迟加载 – 随滚动条下拉逐渐显示

您是本帖的第 11706 个阅读者
平板 打印
标题:
JS实现网页图片延迟加载 – 随滚动条下拉逐渐显示
小轲
帅哥哟,离线,有人找我吗?
头衔:泥客主席
等级:校长
威望:10
文章:10700
积分:67055
注册:1949年10月1日
  QQ 点击这里发送电子邮件给小轲 访问小轲的主页

发贴心情
JS实现网页图片延迟加载 – 随滚动条下拉逐渐显示

 通过jquery.lazyload.js脚本插件实现图片随滚动条渐显的华丽效果。可加速多图片页面的载入速度,让其尽快显示在浏览者眼前。特适用于存在大量图片的页面.

实现原理:

jquery.lazyload.js是一个用 JavaScript 编写的 jQuery 插件。它可以延迟加载长页面中的图片,通过判断浏览者是否在查看当前图片,若不是则默认加载预设的填充图片“grey.gif”,直到浏览者滑动鼠标滚轮或浏览到图片位置时,真正的图片才会得以加载。

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度。浏览器将会在加载可见图片之后即进入就绪状态。在某些情况下还可以帮助降低服务器负担。

实现方法:

只需在网站页面头部加入js代码即可实现。

1、下载并上传相关文件

http://kesonic.com/mainapp/html/weixin/js.zip

下载 jquery-1.4.2.min(如果你有用到完整或者其它的Jquery库了,这个就不用加了)

下载 jquery.lazyload

下载 预填充图片 gref.gif

下载完毕后,上传上述3个文件到相关目录。

注:若之前已使用相关jquery.js,则不需要下载jquery-1.4.2.min.js

在页面head头部中适当位置添加下面JS调用代码。

<script type="text/javascript" src="jquery-1.4.2.min_.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function($){
$("img").lazyload({
placeholder:"grey.gif",
effect:"fadeIn"
});
});
</script>

注:

$(“img”) 可以用来限定对页面中的哪些img生效,如只针对内容部分可修改为 $(“.content img“) 。


ip地址已设置保密
2014-2-2 21:07:48

Powered By Dvbbs Version 7.1.0 Sp1
页面执行时间 0.04688 秒, 4 次数据查询