首先调用jQuery库文件,还有jquery.scrollLoading.js,您可以直接在页面的某处添上如下的代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/mini/jquery.scrollLoading-min.js"></script>
此插件的方法名就是scrollLoading,所以,直接:包装器.scrollLoading();就可以实现滚动加载效果了,简单的吧。如下:
$(".scrollLoading").scrollLoading();
表示所有class为scrollLoading的元素绑定了滚动加载的方法。
当然,不可能真的就如此简单,我们还需要做点小动作的。元素默认是不加载的,那么真正的加载地址显然要预先在元素上放置的,例如新浪微博默认把头像地址绑在了一个自定义的”dynamic-src”属性上,见下图:
在HTML5中,以data-开头的自定义属性都是合法的,且地址可以是图片,页面等。所以,我设定了绑定地址的自定义属性为”data-url”,此属性值设为真实的图片(或页面)地址就可以了。例如下面:
<div class="scrollLoading" data-url="loaded.html">加载中...</div>
会在滚动时加载名为loaded.html的页面,并自动替换里面的内容。
对于常用的图片,还有一点小问题,就是其默认的src图片地址。其src地址不能是真实的图片地址(否则会直接一次性全部加载),也不能是空地址或是坏地址,否则IE浏览器下会出现很惊悚的红叉叉。。我的做法是默认链接的是一个1px * 1px的gif透明图片(大小很小),同时可以透出后面加载中gif动画图片,当滚动加载的时候直接把此gif图片替换掉。于是,对于图片,可能就有类似下面的代码:
<img class="scrollLoading" data-url="http://image.zhangxinxu.com/image/study/head/s180/1.jpeg" src="http://www.zhangxinxu.com/study/image/pixel.gif" width="180" height="180" style="background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;" />
四、scrollLoading可选参数
scrollLoading是个很简单很小的插件(无注释YUI compressor min版仅508B),所以参数也很少,就一个,见下表:
参数 默认 释义
attr data-url 获取元素加载地址的属性名
就这些了。此插件只适用于页面默认滚动条的动态加载。对于内部div之类的滚动加载不支持。
分享到:
相关推荐
44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
主要介绍了jQuery实现滚动到底部时自动加载更多的方法,涉及jQuery基于ajax动态操作页面元素相关实现技巧,需要的朋友可以参考下
44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45.jQuery演示Ajax加载并显示图片的相片画廊实例 46.jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示...
设置页面加载时滚动条自动滚到底的方法: jQuery: 代码如下: $(function(){ var h = $(document).height()-$(window).height(); $(document).scrollTop(h); }); JavaScript: 代码如下: [removed] = ...
主要介绍了jQuery实现模仿微博下拉滚动条加载数据效果,涉及jQuery响应下拉滚动事件动态操作页面元素的技巧,需要的朋友可以参考下
jQuery 滚动 jQuery 的现代滚动。 该插件主要设计用于触摸设备,也适用于桌面浏览器。 目前仅支持垂直滚动。 请注意,该插件不使用小部件工厂模型,因为它可以与普通 jQuery(没有 jQuery UI 或 jQuery Mobile)...
What isinfini scroll jquery 插件用来在页面滚动到屏幕底部时自动加载内容并追加 DOM 元素到页面底部,api接口友好,可能是你目前能找到的最简单好用的无限滚动加载插件。Live DemoInstallation包含 infini_scroll ...
该插件不需要jQuery-UI用法在页面加载所需的jQuery元素上调用doubleScroll函数: $ ( document ) . ready ( function ( ) { $ ( '.double-scroll' ) . doubleScroll ( ) ;} ) ;选项您可以使用以下选项配置双滚动: ...
如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。 当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的...
19. 如果自动滚动到页面中的某区域 6 20. 如何检测各种浏览器: 6 21. 如何替换串中的词 6 22. 如何禁用右键单击上下文菜单: 6 23. 如何定义一个定制的选择器 6 24. 如何检查某个元素是否存在 7 25. 如何使用jQuery...
如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来。...
主要介绍了jQuery实现的简单分页,涉及jQuery数学运算与页面元素操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下