Если я нажимаю кнопку, содержимое 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.
Когда вы вызываете ваш 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".
Что-то вроде:
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();
});
});