Question

我正在使用Ajax来部分加载我的网站。 GET数据的内容有图像，但这些图像在页面上几秒后出现。图像大小约为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仅返回网络内容。

来自开发者工具的网络：

Answer 1

你可能想在成功函数中尝试这样的事情。首先隐藏结果div，然后在加载数据后显示div。

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

可能的第二种解决方案

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

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

1 个答案: