Question

刚开始学习jquery中的Ajax（）函数。试图创建一个小部件，其中图像加载器将出现，直到从服务器加载图像。

我想对这些李的所有图像应用相同的内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    li { padding: 10px; }
    ul.imageList li .pics { height: 50px; width:50px; }
</style>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
    $('document').ready(function() {
        $('#click').click(function(event) {
            event.preventDefault();
            $(".imageList li").html('<img src="http://deltaplanveter.ru/app/webroot/img/loader.gif" />');
            $(".imageList li").load('1.png');
        });
    });
</script>
</head>
<body>
<div class="images">
    <ul class="imageList">
        <li><img src="1.png" class="pics" /></li>
        <li><img src="2.png" class="pics" /></li>
        <li><img src="3.png" class="pics" /></li>
        <li><img src="4.png" class="pics" /></li>
    </ul>
    <a href="#" id="click">Show Images</a>
</div>
</body>
</html>

请在此查看我的实时代码 http://jsfiddle.net/ylokesh/cZ6F7/

谢谢！ Lokesh Yadav

Answer 1

$('#loadingDiv').hide()  // hide it initially
      .ajaxStart(function () {
        //alert('started');

        $('#loadingDiv').show();
       })
      .ajaxStop(function () {
       //alert('stoped');

        $('#loadingDiv').hide();
    });

<span id="loadingDiv"><img src="images/ajax-loader.gif" alt="Loading..."></span>

Answer 2

如果您的图片<img>元素与定义的src属性一起出现，则不会有任何ajax /延迟加载，因为大多数浏览器都会加载<img>，即使它们是:invisible。

但是，你可以使用类似的东西：

$(document).ready(function() {
    $('img').hide();//hide all the images on the page
});

var i = 0;
var interval=0;
$(window).bind("load", function() {
    var interval = setInterval("doThis(i)",100);
});

function doThis() {
    var images = $('img').length;
    if (i >= images) {
        clearInterval(interval);
    }
    $('img:hidden').eq(0).fadeIn(100);
    i++;
}

使用css规则来显示加载器：

#gallery li a {
    background: url("/images/ajax-loader.gif") no-repeat scroll 50% 50% #EEEEEE;
}

jsfiddle

上的示例

修改

如果您想使用Ajax加载图片，则可以在Ajax Start event上触发加载程序图片。

如果你使用带有模态加载器的全局容器，那么你的工作效果最好，但也适用于你的特定情况。

示例：

var $loader = $('<div />').attr('id', 'loader'); var $spinner = $('<img />').attr('src', '/images/ajax-loader.gif') .attr('alt', 'Loading'); $loader.append($spinner); $('body').children().last().after($loader); $('body').ajaxStart(function() { $loader.show(); }).ajaxComplete(function() { $loader.hide(); });

相应的css：

#loader { background: url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png") repeat scroll 50% 50% #666666; display: none; height: 100%; left: 0; opacity: 0.3; position: fixed; top: 0; width: 100%; } #loader img { left: 45%; position: relative; top: 50%; }

Example

通过ajax调用加载图像，同时显示加载器图像

2 个答案: