ajax加载后图像不会立即显示

Question

我正在使用Ajax来部分加载我的网站。GET data的内容包含图像，但这些图像会在几秒钟后出现在页面上。图像大小约为20kB，因此这不是瓶颈。

我使用的是php页面，它返回一些内容。这个页面会在一段时间内立即加载图像，但使用ajax时，它会加载文本，但图像会在几秒钟后加载。如何实现快速加载？

我正在使用这个函数：

function loadMainEvents(resultDiv, cat, limit){
  var spinner = new Spinner().spin(mainPageEvents);
  $.ajax({
    url: "/getMainPageEvents.php?category=" + cat + "&limit=" + limit,
    type: "GET",
    success: function(data){
        resultDiv.innerHTML = data;        
        spinner.stop();
    }
  }); 
};

编辑:我创建了一个做同样事情的test.php

<html>
<head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type="text/javascript"></script>
</head>
<body>
    <div id="div" style="float:left;">wait</div>
    <div id="div2">wait</div>
    <script>
        $(function () {
            $.ajax({
                url: "/getMainPageEvents.php?category=&limit=10&from=29.11.2015&to=29.11.2015&pno=1",
                type: "GET",
                success: function (data) {
                    $("#div").html(data).on('load', function () {
                        $(this).fadeIn(250);
                    });
                }
            });

            $.ajax({
                url: "/getMainPageEvents.php?category=&limit=10&from=29.11.2015&to=29.11.2015&pno=1",
                type: "GET",
                success: function (data) {
                    $("#div2").html(data).on('load', function () {
                        $(this).fadeIn(250);
                    });
                }
            });
        });
    </script>
</body>

​

getMainPageEvents.php仅返回web内容。

来自开发人员工具的网络：

​

Answer 1

您可能希望在success函数中尝试类似这样的操作。首先隐藏结果div，然后在加载数据后显示div。

$(resultDiv).html(data).promise().done(function(){
    spinner.stop();
    $(this).fadeIn(250);        
});

可能的第二种解决方案

$(resultDiv).html(data).on('load', function(){
    spinner.stop();
    $(this).fadeIn(250);        
});