jquery.tools.js图片滚动与jquery.lazyload.js图片延时加载

喜欢黄家驹 2011-11-28 06:57:58

页面中使用了jquery.tools.js下的scrollable方法来实现图片滚动，之后加入了jquery.lazyload.js来实现图片延时加载，scrollable块的图片应用不到延时加载，跪求高手解答！注：没有应用scrollable的图片延时加载是成功的。

...全文

530 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

mportker 2011-11-29

打赏
举报

Mark 一下
期待解决，期待散分！

喜欢黄家驹 2011-11-29

打赏
举报

问题没有问清楚导致大家误解了！不好意思，回复3楼容器不能换为items，否则IE一次就把所有图都下载下来了。

在scrollable块上面用鼠标滚轮，图片还是可以正常的延时加载。
问题是，点击【prev上一个，next下一个】的时候，图片不执行加载只有默认显示的几张图可以显示出来!

liangws 2011-11-29

打赏
举报

$("img").lazyload({
event : "sporty",
effect : "fadeIn",
container:$(".scrollable")
});
container容器换个元素看看？$(".items")

MuBeiBei 2011-11-29

打赏
举报

喜欢黄家驹 2011-11-29

打赏
举报

Style:



	<style type="text/css">



		.scrollable {  

			width: 800px;

			height: 400px;

			position:relative;

			overflow:auto;	

			border:1px solid #000;

		}

		

		.items {	

			position:absolute;

			height:20000em;	

			margin: 0px;

		}



		.items div{

			width:780px;

			height:200px;

			margin-right:20px;

			margin-left:20px;



		}

		

		img{

			width:240px;

			height:180px;

			border:1px solid #ccc;

			padding: 5px 5px;

		}

		#actions {

			width:700px;

			margin:30px 0 10px 0;	

		}



		#actions a {

			font-size:11px;		

			cursor:pointer;

			color:#666;

		}



		#actions a:hover {

			text-decoration:underline;

			color:#000;

		}



		.disabled {

			visibility:hidden;		

		}

	</style>

js部分:



	<script type="text/javascript" src="jquery.js"></script>

	<script type="text/javascript" src="jquery.tools.js"></script>

	<script type="text/javascript" src="jquery.lazyload.js"></script>



	<script type="text/javascript">

		$(document).ready(function() {	

				$(".scrollable").scrollable({

					vertical: true,				

					mousewheel: true,

					speed: 500

				});	



				$("img").lazyload({ 	

				    event : "sporty",

	          		    effect : "fadeIn",

	          		    container:$(".scrollable")

           		}); 

		});

	</script>

HTML部分



<body>



	<div id="actions">

		<a class="prev">上一个</a>

		<a class="next">下一个</a>

	</div>





	<div class="scrollable">



		<div class="items">

			<!-- g1 -->

			<div>			

				<img src="img/grey.gif" original="img/1.jpg"/>

				<img src="img/grey.gif" original="img/2.jpg"/>

				<img src="img/grey.gif" original="img/3.jpg"/>	

			</div>

			

			<!-- g2 -->

			<div>

				<img src="img/grey.gif" original="img/4.jpg"/>

				<img src="img/grey.gif" original="img/5.jpg"/>

				<img src="img/grey.gif" original="img/6.jpg"/>	

			</div>

			

			<!-- g3 -->

			<div>

				<img src="img/grey.gif" original="img/7.jpg"/>	

				<img src="img/grey.gif" original="img/8.jpg"/>	

				<img src="img/grey.gif" original="img/9.jpg"/>	

			</div>

			

			<!-- g4 -->

			<div>

				<img src="img/grey.gif" original="img/10.jpg"/>

				<img src="img/grey.gif" original="img/11.jpg"/>

				<img src="img/grey.gif" original="img/12.jpg"/>	

			</div>



		</div>

		

	</div>



</body>