Как вы показываете фотографии так быстро, как Facebook?

Question

Может ли кто-нибудь из вас помочь мне показать фотографии так же быстро, как это делает Facebook!

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

Часто вы просматриваете галереи на других сайтах, это боль в a **, потому что она настолько медленная, когда вы меняете картинку.

Я думаю, вам нужен javascript для этого!?

Answer 1

В зависимости от вашей реализации, вы можете сделать это с некоторыми ajax и скрытыми dom-элементами.

Предположим, у вас есть галерея со слайд-шоу. Вы можете вставить скрытый элемент dom с изображением следующего изображения слайд-шоу для каждой загрузки. Это приведет к загрузке изображения. Если бы вы затем использовали JS для вставки того же тега изображения позже, браузер использовал бы его кеш, а не извлекал его с сервера, поскольку у него уже есть эта фотография.

Это довольно широкий вопрос, но я думаю, что этот подход сработает. Вероятно, было бы лучше не изобретать велосипед заново и не посмотреть, какие графические библиотеки Image prefetch основаны на JQuery или что вам доступно ..

Answer 2

Facebook сжимает изображения до крайности.Попробуйте сами, возьмите изображение, с которым у вас возникли проблемы, и загрузите его на Facebook.Затем проверьте размер изображения, вы будете знать, почему.После того, как я выполнил небольшой тест, загрузив изображение размером 17429 байт и сжав его до 18757 байт, это на 7% больше исходного размера!

При таком сжатом размере вы можете реализовать некоторыесортировать следующее изображение для отображения.Наряду с, я думаю, у них очень хорошая инфраструктура.

Answer 3

Если вы хотите, чтобы изображения быстрее просматривались на вашем сайте, сначала убедитесь, что изображения прилично сжаты и не больше, чем должны быть.Количество раз, когда я видел сайты, использующие чрезвычайно большое изображение, уменьшенное до размера, в 5 раз меньшего размера, просто смешно.

Вы можете проверить эти сайты, которые имеют много реализаций и ссылки на то, как предварительнозагрузка / предварительная выборка изображений (css, JavaScript, ajax)

http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/

Поскольку ваш вопрос был помечен как 'jquery', вот один только для этого.

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Answer 4

Прежде всего, Facebook сильно сжимает изображения.Многие другие сайты не делают.Facebook также имеет более быструю сеть, чем большинство других веб-сайтов.

При небольшом размере изображения клиент может предварительно выбрать следующее изображение.

Answer 5

Facebook использует Bigpipe, в работах есть открытая реализация, называемая openpipe

Bigpipe отправляет контент в браузер, когда сервер прекратил обработку, поэтому пользователь заметит, что он быстрее.

Он в основном загружает страницы, когда они готовы для пользователя, в браузере реализация основана на Javascript, и вы должны передать информацию клиенту с предпочитаемым языком сервера.

Answer 6

Предварительно загруженный означает загрузку страницы при загрузке, что происходит с тегом <img>. Нет, это просто потому, что размер файла меньше.