Загрузка изображения до элемента для элемента - PullRequest
Новая
       21

Загрузка изображения до элемента для элемента

0 голосов
/ 10 апреля 2011

Существует div #container, который содержит различные div с большими фоновыми изображениями,

Я хочу использовать Pre-Image loading js, чтобы избежать уродливой загрузки изображения.

Но проблема в том, что я не могу найти скрипт, который загружает все изображения в фоновом режиме и вместо этого в #container отображает панель загрузки.

Хотя Интернет полон сценариев, которые загружают изображения для всего тела, но я хочу просто для элемента, в то время как все остальное видно, например, контент.

ОБНОВЛЕНО Вопрос: Будет ли работать следующий скрипт для фоновых изображений, указанных в CSS? 

$('#container img:last').load(function(){ 
  //do stuff
});

ОБНОВЛЕНИЕ : Лучшее решение - воспользоваться этим плагином jQuery, который называется preloadCssImages. Вы можете найти это здесь .

Он предварительно загружает все имеющиеся изображения CSS, даже не удосужившись сделать все это.

Ответы [ 3 ]

1 голос
/ 10 апреля 2011

Сначала установите загрузочное изображение в контейнере: 

<div id="container"><img src="loading.gif" class="loading"/></div>

Когда загрузка всех изображений завершится, очистите #container div и добавьте все изображения в div следующим образом: 

$('#container img:last').load(function(){
$('#container img.loading').remove();
})
1 голос
/ 10 апреля 2011

Элегантным решением является использование каскадирования CSS. HTML: 

<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>

CSS: 

.c1 { background: #fff }
.c2 { background: #eee }
.loadimages .c1 { background: url(big1.jpg); }
.loadimages .c2 { background: url(big2.jpg); }

JS (под нагрузкой или когда вы будете готовы): 

document.getElementsByTagName('body')[0].className += 'loadimages';

Большинство браузеров загружают неиспользуемые изображения только по мере необходимости или загружают их после запуска события загрузки окна. Тем не менее, изображения также помещаются в очередь загрузки в том порядке, в котором они встречаются, поэтому, даже если вышеуказанный JS выполняется на DOM ready, он все равно будет загружать изображения после всех других изображений, которые не каскадируются за классом .loadimage. .

1 голос
/ 10 апреля 2011

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

$ ('# container img: last'). Load (function () { // делать вещи });

...