webew
Войти » Регистрация
 
JavaScript :: Графика

Прелоад изображений

9 июня 2008, 11:56

Делаете фотогалерею?

Тогда высока вероятность того, что вы столкнетесь с задачей предзагрузки изображений. В качестве примера рассмотрим сервис fotki.yandex.ru. При выборе фотографии на странице будет присутствовать небольшая линейка с превьюшками, которые можно прокручивать. Чтобы при прокрутке не возникало тормозов, необходимо заранее загрузить некоторое количество превью. Учимся это делать.

Способ первый - неправильный

Раньше автор активно пользовался таким вот способом прелоада, и даже рекомендовал его другим:

function newImage(path) {
      var image = new Image();
      image.src = path;
      return image;
}

Буквально на днях выснилось, что нормально работает он только в Gecko (Mozilla, Netscape, Firefox). То есть изображения действительно загружаются, срабатывают обработчики onload и о превью можно получить минимум данных, width/height, например. В остальных браузерах ничего подобного не происходит!

Способ второй - работающий

Удалось раздобыть кроссбраузерный способ прелоада изображений. Он не такой изящный, как предыдущий, зато работает:

function preload(images) {
    if (typeof document.body == "undefined") return;
    try {
        var div = document.createElement("div");
        var s = div.style;
        s.position = "absolute";
        s.top = s.left = 0;
        s.visibility = "hidden";
        document.body.appendChild(div);
        div.innerHTML = "<img src=\"" + images.join("\" /><img src=\"") + "\" />";
    } catch(e) {
        // Error. Do nothing.
    }
}
preload([
    'http://2007.fastcoder.ru/pic/logo.gif',
    'http://2007.fastcoder.ru/unsorted/ows.gif'
]);

В отличие от первого скрипта, данная функция принимает массив с УРЛ-ами превью, но можно её модернизировать на ваше усмотрение.

Способ третий - идеальный

Может вы предложите? ;-)


© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
NO USERPIC

rgbeast

Спасибо за статью. Тоже пользовался первым вариантом, не знал, что он не работает.
10.06.2008, 04:53
Ответить
NO USERPIC

BiGX

Использовать jQuery (успростив код) и подгружать превьюшки с помощью AJAX.
Либо модернизировать второй варинат, дополнив AJAX, и тогда можно будет отказаться от jQuery
20.06.2008, 02:22
Ответить

bur

Зачем нагружать страницу, подключая ради решения такой простецкой задачи jQuery?

И причем тут AJAX? Изображения загружаются по протоколу HTTP, независимо от используемого способа.
23.06.2008, 08:17
Ответить
NO USERPIC

Octane

Помоему в Опере не загружаются невидимые изображения, не с display: none; не с display: hidden; поэтому такой код:
...
s.visibility = "hidden";
...

неуниверсален, действительно кросбраузерный метод - отрицательный background-position.
27.06.2008, 16:44
Ответить

bur

Лучше проверяйте данные, которыми делитесь. Изображения в Опере с visibility = "hidden"; отлично загружаются, как и в остальных браузерах.
29.06.2008, 11:23
Ответить
NO USERPIC

mirkus

новые версии.
а грамм по старее не видят.
04.11.2008, 20:24
Ответить

bur

Например?
05.11.2008, 08:21
Ответить
NO USERPIC

Octane

упс, ошибся, не "display: hidden;", а "visibility: hidden;"
27.06.2008, 16:45
Ответить

Serg_pnz

А подскажите скрипт предзагрузки, если известен массив картинок?
22.07.2008, 12:07
Ответить

bur

ЭЭЭ, не понял.
А описанная в статье функция preload, работающая с массивом images не подходит?
22.07.2008, 12:10
Ответить

Serg_pnz

Дааа. Невнимателен, извините.
Т.е. скармливаем в хедере массив и всё?
22.07.2008, 12:48
Ответить

bur

Лучше не сразу в head, а привязать загрузку к какому-нибудь пользовательскому действию.
К примеру, пользователь может зайти на страницу и ничего не листать из превьюшек, при этом их ему загрузится полный комплект.

Если же хочется сразу в head, грузите по факту onload-а страницы:
var imagesArray = ["1.jpg", "2.jpg", "3.jpg"];
window.onload = function() {
    preload(imagesArray);
}


А еще лучше использовать добавлялку обработчиков.
22.07.2008, 12:55
Ответить

Serg_pnz

Спасибо.
Мне как раз не надо по факту, а нужно первым делом их загрузить. А то, что я таскать их не буду по всему сайту - факт, поскольку в цмс могу динамически набирать хедер, в зависимости от модуля.
22.07.2008, 14:40
Ответить
NO USERPIC

Mix(a)er

Попытался применить данный подход в web-приложении, которое должно корректно работать в IE6, IE7, FF и Safari.
Отдельно создал div <div id="preloadImagesDiv" style="position:absolute; top:0px; left:0px; visibility:hidden; display:none"></div>

function preloadImages() {
if (typeof document.body == "undefined") return;
try {
var i, a = preloadImages.arguments;
var div = document.getElementById("preloadImagesDiv");
for (i = 0; i < a.length; i++) {
if (a[i].indexOf("#") != 0) {
div.innerHTML += "<img src=\"" + a[i] + "\" />";
}
}
catch(e) {
}
}

И всё равно при первой загрузке в IE и 6 и 7 вижу только красный крестик и альтернативный текст. Что может быть не так?
10.09.2008, 15:59
Ответить

bur

Не глядя в js-код могу сказать, что прелоад не будет работать, если на контейнере стоит display:none. Убирайте.
10.09.2008, 16:45
Ответить
NO USERPIC

Mix(a)er

К сожалению, удаление display:none ничего не изменило. В IE всё равно первый раз только альтернативный текст и без изображения.
11.09.2008, 08:38
Ответить

bur

В приводимой вами функции не хватает одной закрывающей фигурной скобки (синтаксическая ошибка). Но это вы наверняка заметили.

В остальном - функция прекрасно справляется со своими обязанностями. Поясните, какую задачу вы пытаетесь решить? Возможно там не требуется прелоад...
11.09.2008, 08:59
Ответить
NO USERPIC

Mix(a)er

На странице есть небольшое preview. По событию onclick вызывается функция создания и заполнения popup-окна. Эта же функция вызывает вышеописанную функцию preloadImages() ещё до создания popup в виде preloadImages(imgUrl), где imgUrl - это урл полноразмерной картинки. Вот эту самую полноразмерную и нужно потом вставить в popup.
11.09.2008, 09:34
Ответить

bur

Гмм, не уверен что прелоад сработает для разных объектов window. Прелоад в таком случае нужно делать внутри попапа.

К тому же в данной задаче он вам просто не нужен. Т.к. попап откроет ровно ту же картинку...
11.09.2008, 09:38
Ответить
NO USERPIC

magi

у меня таже проблема, красные кресты вместо привью и самой картинки :(
вот тема с моим скриптом, уже долго мучаюсь с ним, ни как не пойму почему он не работает...
http://webew.ru/posts/2540.webew
04.10.2009, 12:58
Ответить

bur

Ответил.
05.10.2009, 07:22
Ответить
NO USERPIC

lesha111

уже много лет пользуюсь таким методом со времен IE 4.
создаю объекты Image c атрибутами src и браузер грузит это в кэш. работает безупречно.
pix=new Array('image1.jpg','image2.jpg','image3.jpg')
pic=new Array()
function preloadpix(){
for(i=0;i<=pix.length-1;i++){
pic[i]=new Image()
pic[i].src=pix[i]
}

<body onload="preloadpix()">


рабочий пример papas.ru. открывается сплэш и пока юзер смотрит наш флаер, грузится двухмегабайтовый массив с картинками. оптимизировано для соединений 512+ кбит
30.10.2009, 17:49
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: