动态加载图片和url的jQuery插件

2010-12-13 06:11:33 作者:张鑫旭 来源:查看 | 【

如果图片太大太多需要动态加载,或者类似微博、Twitter内容太长,需要动态加载内容到页面,就可以用到这个插件了!

查看演示页面 View Demo

在网页<head>区添加以下代码

<script language="javascript" src="js/jquery.min.js"></script>
<script language="javascript" src="js/jquery.scrollLoading.js"></script>


在网页<body>区添加以下代码
<SCRIPT>
$(function() {
	$(".scrollLoading").scrollLoading();	
});
</SCRIPT>


图片演示:

<div align="center">
<img class="scrollLoading" data-url="images/1.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;"  /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/2.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/3.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/4.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/5.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/6.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/7.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/8.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/9.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/10.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/11.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/12.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/13.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/14.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/15.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/16.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/17.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/18.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/19.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/20.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/21.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/22.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/23.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/24.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/25.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/26.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/27.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/28.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/29.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>
<img class="scrollLoading" data-url="images/30.jpg" src="images/pixel.gif" style="background:url(image/loading.gif) no-repeat center;" /><br>图片(新浪微博提供)<br>

</div>


这里把图片的src属性设置为一个像素为1的透明图片,把真实的图片地址放在data-url属性内,同时把图片的背景设置为:loading.gif,默认显示正在加载,当拉动滚动条时到图片出现时,即可看到图片被动态加载出来了!

如果要动态加载网页,只需要使用如下代码即可:
<div class="scrollLoading" data-url="loaded.html">加载中...</div>

下载"动态加载图片和url的jQuery插件"

  • 本地下载
  • 本地下载2

相关资源