Блог

Главная - Вопросы по программированию - Предварительная загрузка изображений с помощью css

Предварительная загрузка изображений с помощью css

#css #preload

#css #предварительная загрузка

Вопрос:

Является ли это приемлемым способом предварительной загрузки изображений по сравнению с некоторым js-кодом внутри html / head

 body:after{
    display:none;
    content:
    url(img1.jpg)
    url(img2.jpg)
    ...
}

способ js

 $.preload = function() {
  for (var i = 0; i < arguments.length; i  ) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preload("img1.jpg","img2.jpg");

Комментарии:

1. Приятно, что в вашем вопросе вы сравнили методы предварительной загрузки CSS и JS. Я использую некоторые изображения в динамически генерируемом фрагменте HTML и только что обнаружил, что для меня предварительный загрузчик CSS был правильным способом получения кэшированных изображений.

2. Ваш метод CSS работает для меня, спасибо.

Ответ №1:

Концепция заключается в размещении фоновых изображений на псевдоэлементе, который загружается при загрузке страницы, но не отображается. Это приводит к тому, что браузер загружает изображения, чтобы, когда они будут вызваны позже другим элементом, они были готовы к работе.

Это можно использовать для предварительной загрузки изображений и замены их при наведении курсора мыши. У «предварительной загрузки» div нет высоты / ширины, поскольку для изображений задан фоновый режим, поэтому он не отображается на странице, и изображения готовы, когда вы хотите поменять их местами при наведении курсора мыши. (очевидно, вам придется установить высоту / ширину для привязок. Я просто показываю минимальный CSS здесь, чтобы донести суть)

HTML:

 <div id="preload"></div>
<div id="icons">
    <a href="http://..." class="button-1"></a>
    <a href="http://..." class="button-2"></a>
    <a href="http://..." class="button-3"></a>
</div>

CSS:

 #preload  {background: url('pic1b.png'), url('pic2b.png'), url('pic3b.png');}
.button-1 {background: url('pic1a.png');}
.button-2 {background: url('pic2a.png');}
.button-3 {background: url('pic3a.png');}
.button-1:hover {background: url('pic1b.png');}
.button-2:hover {background: url('pic2b.png');}
.button-3:hover {background: url('pic3b.png');}

Очевидно, что есть много других способов, и в сообщении выше приведена ссылка, которая включает в себя многие другие.

http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Комментарии:

1. почему display inline ? Это по умолчанию, не так ли? А почему width:0 и height:0? не было бы лучше display:none ?

2. У «предварительной загрузки» div нет высоты / ширины, поскольку для изображений задан фоновый режим, поэтому он не отображается на странице, и изображения готовы, когда вы хотите поменять их местами при наведении курсора мыши.

3. Я опубликовал отличный пример, пожалуйста, дайте мне знать, если это было полезно

4. Да, ваши усилия действительно полезны для меня, и я поддержал это, большое спасибо, но я уже принял ответ ndm13.

Ответ №2:

Я полагаю, что этот метод будет работать, если изображение не генерируется динамически. Единственная проблема с предварительной загрузкой с использованием только CSS, по-видимому, заключается в том, что изображения загружаются ВМЕСТЕ СО страницей, а не после нее. Вы можете запустить событие JavaScript после завершения загрузки страницы.

Дальнейшее чтение: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax /

Комментарии:

1. Спасибо, ваша ссылка очень полезна для меня.

Ответ №3:

По крайней мере, в Firefox изображения не кэшируются display: none . Вместо этого вы можете установить:

 body:after {
width: 0; height: 0; overflow: hidden; display: block;
content:    url('img1')
            url('img2')
            ...;
}
Метки: