Загрузка страницы в div, когда все изображения полностью загружены после загрузки для экрана загрузки

Question

Загрузка страницы в div, когда все изображения полностью загружены после загрузки для экрана загрузки

0

Если я нажимаю кнопку, содержимое DIV сначала должно быть заменено load_page.php, а затем через другую страницу вторым загрузчиком, когда вторая страница будет загружена, загружая все изображения.

Вторая страница содержит много изображений и должна отображаться только при полной загрузке.

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

Но вместо этого load_page заменяется сразу, и вы можете видеть, как вторая страница загружает все изображения.

EDIT Я заметил еще одно странное событие. Иногда load_page.php загружается после second_page.php.

Shaq D. 30 нояб. 2013, в 15:29

Источник

Теги:

jquery

2 ответа

0

Я не загружал бы файл 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();
    });
});

alexcasalboni 30 нояб. 2013, в 13:20

Ещё вопросы

Michael Dyhr Iversen · Accepted Answer · 2013-11-30T11-26-00.000Z

Когда вы вызываете ваш 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);
});

EDIT: Что касается вашей проблемы с загрузкой 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);
    });
});

Благодарю. Я попробовал это, но это, к сожалению, не решило мою проблему. Я хочу отображать load_page.php так долго, пока second_page.php не будет полностью готов.
изображения, которые вы хотите предварительно загрузить, случайные или всегда одинаковые? Знаете ли вы изображения для предварительной загрузки на исходной странице? если это так, используйте функцию предварительной загрузки, с которой я связывался до установки $ ("# content"). html (data);