Форум PHP программистов > Задержка загрузки картинки

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Задержка загрузки картинки

kirik

26.01.2009 - 03:12

Ребят, такой вопрос -
На ютубе есть такая фишка как подргузка картинок по мере надобности (траффик экономят, хых..).
Это можно увидеть например пройдя по ссылке
Там справа видим что-то типа "More From: CenturyMedia" и див со скроллом. Если резко крутануть скролл вниз, то можно увидеть как подгружаются картинки. Тоесть те картинки, которые скрыты за каким-то дивом, не подгружаются, тем самым ускоряя загрузку страницы, ну и экономят траффик.

Лазил в код самого ютуба, там черт ногу сломит .. нарыл что-то типа такого (на онлоад стоит функция delayLoad()) -

HTML

и нашел кусок яваскрипта -

PHP

var delayLoadRegistry=delayLoadRegistry||[];
var delayLoadCompleted=delayLoadCompleted||[];

function delayLoad(id,img,src){
alert(delayLoadRegistry.length);
    delayLoadRegistry[delayLoadRegistry.length]=[id,img,src];
    delayLoadCompleted[id]=false;
}
function performDelayLoad(id) {
    if(!delayLoadCompleted[id]) {
        delayLoadCompleted[id]=true;
        for(var i=0;i<delayLoadRegistry.length;i++){
            if(delayLoadRegistry[i][0]==id){
                delayLoadRegistry[i][1].onload="";
                delayLoadRegistry[i][1].src=delayLoadRegistry[i][2];
            }
        }
    }
}

Можно понять, что это не весь код.

Может кто-нибудь знает как сделать подобную подгрузку? Или хотя-бы как она реализуется?

Спустя 51 минута, 27 секунд (26.01.2009 - 03:03) twin написал(а):

Ну вот такой самый простой принцип

HTML

Спустя 13 часов, 58 минут, 13 секунд (26.01.2009 - 17:01) s-p-i-d-e-r написал(а):

да но ты тут подгружаешь картинку, как только человек крутанул скролл, а если я крутанул но до картинки не докрутил???

Спустя 51 минута, 56 секунд (26.01.2009 - 17:53) twin написал(а):

Я же говорю - самый простой. А дальше думать надо. Вычислять позиуию или еще чего. Просто если это для экономии трафика, сколько сам скрипт весить будет, стоит ли оно того? Я могу вообще не скролить див, а скрипт мне всё равно подгрузят. Нечесно.

Спустя 2 часа, 5 минут, 50 секунд (26.01.2009 - 19:59) kirik написал(а):

twin, скрипт тебе подгрузят всего один раз (в кэш), а картинки будут подгружать каждый раз, когда появляется новая картинка которой нет в кэше.

Цитата (twin @ 25.01.2009 - 19:03)

Я же говорю - самый простой. А дальше думать надо. Вычислять позиуию или еще чего.

Мне почему-то кажется что там все немного проще, чем вычисление позиции..

Если кто-нибудь наткнется на подобную штуку, отпишите пожалуйста! =)

Спустя 10 минут, 41 секунда (26.01.2009 - 20:10) twin написал(а):

Цитата

скрипт тебе подгрузят всего один раз (в кэш),

Вот это то и плохо. Тут увеличивается время именно первой загрузки, и трафик тоже. По первому пункту понятно - юзерь может просто плюнуть на это дело и отвалить не дождавшись, пока ему натолкают полный кэш. А по второму вообще не чесно, я мож один раз всего зашел, как вот на этот пример допустим. И на кой мне в кэше весь этот монстр? А сколько я трафа пожег (благо безлимитка)? Мне мож картинки и не нужны вовсе, ну а если нужны, то тогда и не жалко трафика, за тем пришел. Вы юзеру выбора не даете - качай что сказали и всё.

Спустя 7 минут, 4 секунды (26.01.2009 - 20:17) kirik написал(а):

twin, тут дело в другом.. Когда у сайта ну допустим 20к уникальных посещений в день, из которых 15к вернувшихся, уже не стоит вопрос о тех юзерах, которые зашли на сайт впервые. Гораздо важнее те 15к которые вернулись, и у которых в кэше наш скрипт сидит. Именно эти юзеры экономят себе траффик и канал серверу.
Кстати если вы зайдете один раз на сайт, то в любом случае скрипт будет весить меньше, чем те 20 картинок, которые будут подгружаться. Другое дело, когда у вас отключены картинки.
Но скажите мне, у скольких людей сейчас диал-ап? Это точно также как беспокоиться о тех юзерах, у которых в браузере выключен яваскрипт =)

Спустя 1 час, 23 минуты, 40 секунд (26.01.2009 - 21:41) twin написал(а):

Цитата

Гораздо важнее те 15к которые вернулись,

ну и не правильный подход. Юзеры всякие нужны, юзеры всякие важны

Прежде чем он постоянным станет, его нужно облизать с ног до головы, а он может и не ждать конца первой загрузки. Откуда взять тогда эти 15к? Обо всех думать надо, искать компромис. Чтоб всем хорошо было. А скрипты эти такие тяжелые, еще какую нибудь jQuery привешают бывает, когда парой строчек обойтись можно. я лично не жду, мне из принципа неохота ждать, потому что полно других, более оптимальных. Я вот и здесь задержался исключительно из за скорости загрузки, а сколько таких форумов видел - ужос. Ну канал - да, аргумент. Только есть ведь куча других решений, не обязательно тяжелые скрипты таскать.

Спустя 2 часа, 29 минут, 57 секунд (27.01.2009 - 00:11) kirik написал(а):

Цитата (twin @ 26.01.2009 - 13:41)

потому что полно других, более оптимальных

Это хорошо, когда есть выбор =)
На самом деле если человека заинтересовал ресурс, то он будет им пользоваться (пока не найдет лучшую альтернативу).
Интересно, сколько при сегодняшних "интернетах" займет загрузка жалкого яваскрипта на 30 килобайт? И еще раз повторюсь. Если есть скроллируемый див, под которым 500 тамбнейлов (ну допустим по 1 кило каждый), а изначально отображается всего 25 картинок, то наверное проще загрузить jQuery+LazyLoad (на 100 кило), чем грузить 475 килобайт картинок. Разве нет? Или есть картиночная галлерея из 100 картинок, которые одна за одной уходят вниз. Много примеров, и практически везде яваскрипт будет выгоднее.

Цитата (twin @ 26.01.2009 - 13:41)

Обо всех думать надо, искать компромис.

А если думать обо всех, то тогда кто подумает о тебе?

По теме -
Фишка называется Lazy loading ("Ленивая" загрузка) тоесть подгрузка картинок, яваскрипта, итд. по мере надобности.

Для картинок есть реализации: тут для jQuery, тут для Prototype

Спустя 1 час, 24 минуты, 54 секунды (27.01.2009 - 01:35) twin написал(а):

Цитата

Если есть скроллируемый див, под которым 500 тамбнейлов

Вот про это я как раз. Если он есть, то да, конечно лучше загрузить 100 kb.
А зачем он есть? Ведь полно других решений, более щадащих, нежели пихать в див кучу имагов, одни теги будут весить - ужос. Ну да, можно на лету их генерить, но все равно скрипт тяжелый будет. И не факт, что юзер будет все 500 листать.
Есть же аякс для этого, лёгкий и не менее эффектный. Просто нужно код написать. Самому, не прячась за широкой спиной фреймворка, из которого большая половмна функций останется не востребованной. Это и есть золотая середина - оптимальный код.
Вот я про что.

Быстрый ответ:

Здесь расположена полная версия этой страницы.