Question

没有人知道在页面完成加载之前，如何显示通过AJAX调用的成功功能获取的图像。我有一个页面，其中包含一个AJAX呼叫，该呼叫使我从php获取特定文件夹中的最后一个图像。我希望浏览器在完成加载页面之前尽快显示我的图像，因为它运行的过程很长，并且不会停止加载，直到完成过程为止。这是我到目前为止所做的

[0-9+() ]+

当我检查代码时，我可以看到图像在那里，但是它正在等待浏览器完成加载。因为当我停止加载时，所有图像都会一次显示。

Answer 1

不，你不能。

因为ajax请求应该比初始化DOM视图慢。但是您可以尝试在onload事件中创建一个预加载器。

请在here上找到并预加载器插件示例。

此示例是在触发文档（html及其头部）加载时，将在顶部显示覆盖的预加载器。图片加载完成后，预加载器将删除。

或者，您可以在onload事件上附加一个覆盖预加载器，然后添加一个函数以在ajax函数结束时删除该预加载器。

简单的例子：

$(window).on("load", function(){
    var preloader = /* preloader code here, with an id (let say #preloader) */;
    $("body").prepend(preloader);
});
/* when first ajax request done */
function sendRequest() {
        $.ajax({
            url: "{{ path('prestaShop_test_get_screenShots') }}",
            success:
                function (data) {
                    $('#links').append($("<div />", {
                            class: 'gallery',

                        }).append($("<a />", {
                            href: 'assets/screenshots/' + data,
                            title: data

                        }).append($("<img />", {
                            src: 'assets/screenshots/' + data,
                            alt: data,
                            style: 'width:400px ; height: 200px'
                        }))
                        )
                    );
                    $("#preloader").remove();
                },
            complete: function () {
                // Schedule the next request when the current one's complete
                setInterval(sendRequest, 5000); // The interval set to 5 seconds
            }
        });
    };

在页面加载之前显示图像

1 个答案: