#javascript #jquery #html #image #angularjs
#javascript #jquery #HTML #изображение #angularjs
Вопрос:
На моем сайте много изображений. Чтобы загрузить их и избежать уродливого эффекта загрузки изображений сверху вниз, я в настоящее время устанавливаю body display none значение, а затем
$(window).load(function(){
$("body").fadeIn(2000);
});
Похоже, это работает для домашней страницы. Но когда я извлекаю страницы внутри ng-view с использованием angular, в которых также есть изображения, изображения, похоже, еще не загружены, и я, похоже, получаю уродливый эффект загрузки изображений сверху вниз. Как мне этого избежать?
Комментарии:
1. Альтернатива: blog.codinghorror.com/progressive-image-rendering
2. @cbuckley Спасибо за это, но я хочу избежать какого-либо эффекта все вместе и просто показывать страницу ajax только тогда, когда загружены все изображения.
3. Кстати, когда вы извлекаете страницу через AJAX, вы извлекаете HTML, а не данные изображения. Только после этого ваш браузер начнет загрузку любых ресурсов в этом HTML.
4. @christian314159 Действительно, вы правы. Следуя тому, что вы сказали, я хочу показывать страницу ajax пользователю только тогда, когда все ресурсы загружены. Я могу показать панель загрузки или что-то в этом роде до тех пор.
5. Я бы попробовал загрузить ответ AJAX в объект jQuery и привязать к нему событие загрузки. Он сработает после загрузки всех ресурсов.
Ответ №1:
Попробуйте что-то вроде этого:
$.ajax("url/to/page", {
success: function(data) {
$temp = $("<div/>").html(data);
$temp.on("load", function() {
// Assume body is already faded out for loading
// Add HTML to the body
$("body").html($temp.html());
// Show content
$("body").fadeIn(2000);
});
}
});
Это загрузит возвращенный HTML-код во временный div и дождется загрузки связанных с ним ресурсов, прежде чем добавлять его в <body> .
Комментарии:
1. Спасибо вам за это. Но, как я уже упоминал в своем вопросе, я использую angular.js для извлечения страниц внутри ng-view. На самом деле я не выполняю часть ajax, это делает angular.
2. Вы пометили свой вопрос как jQuery. Я уверен, что Angluar дает вам возможность перехватить обратный вызов для вызовов AJAX, как это делает jQuery. Используйте эту функцию успеха как таковую.