Question

如果我点击一个按钮，首先应该用load_page.php替换DIV的内容然后再替换当第二页完成加载所有图像时，通过第二次加载的另一页。

第二页包含大量图像，只有在完全加载时才会显示。

$('.query_button').on('click', function (e) {
    $("#content").load('./pages/load_page.php');
    $("#content").load('./pages/second_page.php');
});

但是，load_page立即被替换，您可以看到第二页仍然如何加载所有图像。

修改我注意到另一个奇怪的事件有时load_page.php会在second_page.php之后加载。

Answer 1

当您调用second_page.php时，图像开始加载，这是因为浏览器的工作方式，当它看到图像标记时，它将加载图像。我建议你查看预加载图像并将其与jQuery连接。

看看这个简单的预加载：http://dreamerslab.com/blog/en/preload-images-with-jquery-preload-plugin/

而不是：

$("#content").load('./pages/second_page.php');

你可能想去

$.get('./pages/second_page.php', function(data){
// preload images before publishing to content
$.preload( '/img/space.gif',
  '/img/avatar.jpg'
);
$("#content").html(data);
});

编辑：关于你的load_page加载问题第二是因为.load（）是一个异步函数，你不能告诉哪个是先完成，修复这个使用这个代码，它将从加载first_page.php开始，完成加载后，它将开始加载second_page.php

$("#content").load("first_page.php", function(){
$.get('./pages/second_page.php', function(data){
    // preload images before publishing to content
    $.preload( '/img/space.gif',
      '/img/avatar.jpg'
    );
    $("#content").html(data);
    });
});

Answer 2

我不会加载“load_page.php”文件：只需将其包含在模板中并隐藏它，然后在开始加载“second_page.php”时立即显示。

类似的东西：

var content = $('#content');
var loading = $('#loading-content');
$('.query_button').on('click', function (e) {
    loading.show();
    content.hide().load('./pages/second_page.php', function(){
        loading.hide();
        content.show();
    });
});

在加载加载屏幕后，当所有图像完全加载时，将页面加载到div中

2 个答案: