我要做的是有一个ajax loader gif,当图像按顺序加载到页面时显示。
所以它会像这样工作。
ajax loader show - image fadeIn - ajax loader fadeOut - 然后移动到下一个图像。
ajax loader show - image fadeIn - ajax loader fadeOut - 然后移动到下一个图像。
ajax loader show - image fadeIn - ajax loader fadeOut - 然后移动到下一个图像。
ajax loader show - image fadeIn - ajax loader fadeOut - 然后移动到下一个图像。
继续在页面上这样做。
这是我的代码。
<ul id="clients">
<li><img src="images/logos/clients_03.jpg" width="242" height="152" alt="Taylor Woodrow" /></li>
<li><img src="images/logos/clients_04.jpg" width="242" height="152" alt="BG Group" /></li>
<li><img src="images/logos/clients_05.jpg" width="242" height="152" alt="Canon" /></li>
<li><img src="images/logos/clients_06.jpg" width="227" height="152" alt="department" /></li>
<li><img src="images/logos/clients_08.jpg" width="242" height="164" alt="disney" /></li>
<li><img src="images/logos/clients_09.jpg" width="218" height="164" alt="xts" /></li>
<li><img src="images/logos/clients_10.jpg" width="223" height="164" alt="fisevr" /></li>
<li><img src="images/logos/clients_11.jpg" width="227" height="164" alt="hilti" /></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script>
<script>
$("ul#clients li").append('<img id="show" src="images/ajax-loader.gif" width="32" height="32" alt="fvdsv" />');
$("ul#clients li:eq(0)").show("fast", function () {
/* use callee so don't have to name the function */
$(this).next("ul#clients li").fadeIn("slow", arguments.callee);
});
所以它有点不起作用,但ajax加载器只是一直显示任何帮助?
由于
答案 0 :(得分:0)
首先,你在img中有id = show,你将它附加到所有不合适HTML的图像上。 Ids应该是独一无二的。
如果要在加载图像时显示ajax gif,加载图像后显示图像并隐藏gif,则应使用以下内容:
使用代码:
$('ul#clients li img.images').load(function() {
$(this).next().fadeOut();
$(this).fadeIn();
} );