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

问题描述 投票：0回答：2

我正在使用 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 仅返回网页内容。

来自开发者工具的网络：

Developer tools Network

javascript php jquery ajax
2个回答
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);        
});
0
投票

将ajax函数包裹在setTimeout函数上，让浏览器在渲染时有喘息的空间。您可以 sikp 第一个 ajax 并将其他 ajax 包装在 setTimeout 上，增量为 20。

<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);
                });
            }
        });


        setTimeout(function() {
        $.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);
                });
            }
        });
        }, 20);
    });
</script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.