分享：jQuery页面图片伴随滚动条逐渐显示

最新推荐文章于 2021-07-28 10:10:05 发布

hjj_last

最新推荐文章于 2021-07-28 10:10:05 发布

阅读量473

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/hjj_last/article/details/84161903

版权

这是我在网上看到的，觉得特别好用，就记下了。

插件名为jquery.scrollLoading.js，您可以狠狠地点击这里下载（右键 – [目标|链接]另存为），或是点击这里下载mini压缩版的。

您可以狠狠地点击这里：jQuery滚动加载图片等demo，如果您的网速是在贫困线上挣扎，可以慢慢拖动滚动条，就可以很清楚的看到滚动加载的效果了；如果您的网速让你引以为豪，哥，你需要很快的拖动滚动条才能瞥见效果。

demo页面中似乎有段破坏和谐的HTML片段，那是动态加载HTML后的效果，也就是说，此scrollLoading不仅可以用来滚动加载图片，Ajax load页面什么的也是可以的。

scrollLoading使用

不管怎样，首先调用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.wutongxia.com/web/example/js/jquery.scrollLoading-min.js"></script>

此插件的方法名就是scrollLoading，所以，直接：包装器.scrollLoading();就可以实现滚动加载效果了，简单的吧。如下：

$(".scrollLoading").scrollLoading();

表示所有class为scrollLoading的元素绑定了滚动加载的方法。

当然，不可能真的就如此简单，我们还需要做点小动作的。元素默认是不加载的，那么真正的加载地址显然要预先在元素上放置的。

在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://www.wutongxia.com/web/example/images/1.jpeg" src="http://www.wutongxia.com/web/example/images/pixel.gif" width="180" height="180" style="background:url(http://www.wutongxia.com/web/example/images/loading.gif) no-repeat center;" />

下面是我自己写的一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>滚动延迟加载图片</title>
    <script src="jquery-last.js"></script><!-- 修改为自己的路径 -->
	<script src="jquery.scrollLoading-min.js"></script><!-- 修改为自己的路径 -->
	<style>
		li{
			background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;
			list-style:none;
			width:600px;
			height:300px;
		}
	</style>
</head>
<body>
	<ul>
		<li>
			<img data-url="http://www.aoney.com/fileimages/cool/2011-07-30/201107301548023591.jpg" class="scrollLoading" src="http://www.wutongxia.com/web/example/images/pixel.gif"/>
		</li>
		<li>
			<img data-url="http://image.zcool.com.cn/36/11/1259130321220.jpg" class="scrollLoading" src="http://www.wutongxia.com/web/example/images/pixel.gif"/>
		</li>
		<li>
			<img data-url="http://image.zcool.com.cn/44/22/m_1264427016973.jpg" class="scrollLoading" src="http://www.wutongxia.com/web/example/images/pixel.gif"/>
		</li>
		<li>
			<img data-url="http://www.josueunonueve.com/images/islider/600x300/danilo-montero.jpg" class="scrollLoading" src="http://www.wutongxia.com/web/example/images/pixel.gif"/>
		</li>
		<li>
			<img data-url="http://blogand.net/attach/1/1908723910.jpg" class="scrollLoading" src="http://www.wutongxia.com/web/example/images/pixel.gif"/>
		</li>
		<li>
			<img data-url="http://imgsrc.baidu.com/forum/pic/item/b62612ce051b7f17b700c8a7.jpg" class="scrollLoading" src="http://www.wutongxia.com/web/example/images/pixel.gif"/>
		</li>
		<li>
			<img data-url="http://imgsrc.baidu.com/forum/pic/item/7db95ddad29fddfcb6fd489d.jpg" class="scrollLoading" src="http://www.wutongxia.com/web/example/images/pixel.gif"/>
		</li>
		<li>
			<img data-url="http://imgsrc.baidu.com/forum/pic/item/eeef90dde78c071a5882dda7.jpg" class="scrollLoading" src="http://www.wutongxia.com/web/example/images/pixel.gif"/>
		</li>
		<li>
			<img data-url="http://imgsrc.baidu.com/forum/pic/item/96aed939dd5574d43a87ce9e.jpg" class="scrollLoading" src="http://www.wutongxia.com/web/example/images/pixel.gif"/>
		</li>
		<li>
			<img data-url="http://imgsrc.baidu.com/forum/pic/item/f39893ee9fd790072cf534a7.jpg" class="scrollLoading" src="http://www.wutongxia.com/web/example/images/pixel.gif"/>
		</li>
		<li>
			<img data-url="http://imgsrc.baidu.com/forum/pic/item/68e8dd43aac9923b72f05d43.jpg" class="scrollLoading" src="http://www.wutongxia.com/web/example/images/pixel.gif"/>
		</li>
		<li>
			<img data-url="http://imgsrc.baidu.com/forum/pic/item/ae8917d5d2da68f550da4b07.jpg" class="scrollLoading" src="http://www.wutongxia.com/web/example/images/pixel.gif"/>
		</li>
		<li>
			<img data-url="http://imgsrc.baidu.com/forum/pic/item/5262b209be9a390a6a60fbc2.jpg" class="scrollLoading" src="http://www.wutongxia.com/web/example/images/pixel.gif"/>
		</li>
		<li>
			<img data-url="http://imgsrc.baidu.com/forum/pic/item/aaac6ed9f7bf280410df9b76.jpg" class="scrollLoading" src="http://www.wutongxia.com/web/example/images/pixel.gif"/>
		</li>
	</ul>
	<script language="javascript" type="text/javascript">
		$(function (){
			$("img.scrollLoading").scrollLoading();
		});
		  
	</script>
</body>
</html>

data-url是真实图片地址，其src地址不能是真实的图片地址（否则会直接一次性全部加载），也不能是空地址或是坏地址，否则IE浏览器下会出现很惊悚的红叉叉。。作者的做法是默认链接的是一个1px * 1px的gif透明图片（大小很小），我也用了它的gif透明图片