Question

我需要继续显示加载gif，直到所有图像在返回的数据（html）中已经完成加载。数据和一切都正确返回，但.live（'load'，function（）{}）永远不会被执行，也没有.live也尝试过。 #ContentBody的内容刚刚用返回的html数据替换（#LoadingLayer当然也消失了），我可以像往常一样看到图像加载。

<script type="text/javascript">


    $("#RightLink").click(function (event) {
        event.preventDefault();

        var tourl = $(this).attr('data-ajax-url');


        $.ajax({
            type: "POST",
            url: tourl,
            dataType: "html",

            async: true,
            beforeSend: function () {
                $("#LoadingLayer").show(); //show layer with image loading gif
                $('#ColumnContainer').hide();
            },
            success: function (data) {

                $('#ContentBody').html(data).live('load', function () { $("#LoadingLayer").hide(); });
            }
        });
    });

</script>

HTML布局：

<body>

    <div id="ContentBody">

    <a id="RightLink" href="/store/ContentBodyGenerator" />

    <div id="LoadingLayer"><img src="loading.gif" /></div>

    <div id="ColumnContainer">... Main contents, lots of images here</div>

    </div>

</body>

Answer 1

为什么不直接隐藏#LoadingLayer？

$('#ContentBody').html(data);
$("#LoadingLayer").hide();

编辑：

我误解了你的问题，我认为没有一种简单的方法可以检测到所有图像都已加载。我建议你试试waitForImages插件。

Answer 2

尝试将“成功”功能的内容更改为此...

$('#ContentBody').html(data).live('load', function () {
    var imgcount = $(this).find("img").length;
    $(this).find("img").one("load", function() {
        imgcount--;
        if (imgcount == 0) {
            $("#LoadingLayer").hide();
        }
    }).each(function() {
        if (this.complete) $(this).load();
    });
});

等待加载html（数据）然后获取图像计数。然后，它会为每个图像添加一个事件处理程序，以便在加载图像时减少图像计数。 one("load"代码仅允许以下代码运行一次，each代码基本上表示“如果已加载（根据缓存图像），则运行加载事件”。

一旦图像计数为0，它就会隐藏加载层。

如果没有我可以通过控制台运行的URL我不能100％确定它是准确的，所以它可能需要一个小提琴。如果你被困住，请给我们一个喊叫。

Answer 3

尝试将load事件绑定到图像。跟踪加载的数量，并在加载后才移除加载层。这是未经测试的代码，但应该给你一个想法：

success:function(data){
    // Set the content
    $('#ContentBody').html(data);

    // How many images do we have?
    var images = $('#ContentBody img'),
        leftToLoad = images.size();

    // Listen for load event *FOR IMAGES*
    images.bind('load', function (){
        // Hey look we loaded one, was that the last one?
        if(--leftToLoad === 0){
            // Yep, we're done
            $("#LoadingLayer").hide();
        }
    });
}

如果你更愿意使用live而不是ajax回调中的处理，请在$（document）.ready回调中执行此操作：

$('#ContentBody img').live('load', function(){...});

应该做的伎俩。

干杯

为什么$ .load（handler（eventObject））对Ajax请求后从服务器返回的数据不起作用，试图让它等待加载所有图像

3 个答案: