Как Facebook автоматически отображает изображение в нужном размере в зависимости от пользовательских экранов?

Ответ 1

Когда вы растягиваете окно и, следовательно, меняете размер "театра", изображение меняет размер. Исходя из этого, я могу только предположить, что "театр" установлен на определенный размер (ы), и изображение имеет максимальную ширину или максимальную высоту, поэтому оно расширяется или сжимается с размером внешних элементов (театра), Эта часть выполняется с помощью CSS.

Я думаю, что определение размера экрана будет иметь какое-то отношение к DOMDimensions (http://pastebin.com/Biz9ntMj) и DimensionTracking (http://pastebin.com/Ys72APyL). Также любой щелчок перехватывается "праймером" (https://gist.github.com/376039) script, который затем маршрутизирует действие через AsyncRequest (если необходимо), а затем реагирует в зависимости от JOSN ответ. Мой размер экрана показывает только один размер как для ссылки, так и для окончательного изображения (_n.jpg), но я предполагаю, что, как если бы он обрабатывался javascript, тогда было бы так, как он будет работать с размерами, в противном случае (если javascript выключен или что-то), он просто вернется к своему лучшему предположению об одном размере, соответствующем всем 720 x 960, а затем используя css, как указано выше, чтобы заставить размер.

Изменить

О CSS...
С помощью CSS вы можете установить высоту (определенную или относительную по размеру экрана, что вам когда-либо нравится) блочному элементу, содержащему изображение, а затем установить для этого изображения max-height/width, а не определенную высоту/ширину. Таким образом, изображение будет сохранять пропорции, но все равно расширяться и сокращаться до разрешенного размера в контейнере. Пример этого можно увидеть здесь: http://jsfiddle.net/tV6gG

В javascript...
Когда что-либо нажимается на странице (и работает javascript), она попадает в ссылку "primer" script, упомянутую выше (полную версию можно увидеть здесь - http://pastebin.com/BwhKJ14d) - (Для получения дополнительной информации см. http://www.facebook.com/video/video.php?v=596368660334&ref=mf). Этот script затем проверяет атрибут rel события click (см. Строку 28), а затем решает, что "загружать" на основе этого атрибута (см. Строку 52). Отсюда он загружает зверя функции (http://pastebin.com/eGgtz4dT), которая обрабатывает все виды изображений.

В этом script есть несколько функций, которые выглядят так, как будто они могут иметь какое-то отношение к размеру изображения, а именно getCurrentImageServerSizeDimensions (см. строку 218). Существуют и другие аспекты оформления сцены, и что не слишком, но я предполагаю, что это важно. Насколько мне известно, этот script затем скомпилирует нагрузку данных, и они делают другой вызов на сервере, чем с обычным href.

Unescaped href из источника:

http://www.facebook.com/photo.phpfbid=10152228292295554&
set=t.516587895&type=3&src=http://sphotos-g.ak.fbcdn.net/hphotos-ak-
snc7/374008_10152228292295554_643067794_n.jpg&size=720,960&theater

Неизбежный фактический запрос, отправленный на информационный бюллетень (для получения дополнительной информации о страницах см. выше видео о BigPipe):

http://www.facebook.com/ajax/pagelet/generic.php/PhotoViewerInitPagelet?
ajaxpipe=1&ajaxpipe_token=AXhGMa1SEXnChIug&no_script_path=1&data=
{"fbid":"10152228292295554","set":"t.516587895","type":"3",
"size":"720,960","theater":null,"firstLoad":true,"ssid":1354797924833}
&__user=6462456246&__a=1&__adt=2

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

Что касается предыдущих скриптов...
DOMDimensions script представляет собой набор функций, которые довольно хорошо объясняются названиями функций, чтобы быть честными (getElementDimensions, getViewportDimensions, getViewportWithoutScrollbarDimensions, getDocumentDimensions и measureElementBox). Для получения дополнительной информации о том, что эти индивидуальные функции на самом деле, я бы рекомендовал просмотреть их и просто проверить любые основные функции javascript, которые вы не получите. Это не выглядит слишком сложным.
DimensionTracking script просто вызывает getViewportDimensions() и сохраняет данные, сгенерированные с помощью страницы /ajax/dimension_context.php.
Если, кажется, повторное измерение размеров каждые 100 миллисекунд (см. Строку 17), изменение размера окна (см. Строку 18) или фокус окна (см. Строку 18).





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

Ответ 2

Многие сайты делают такие вещи. Я бы отступил от того, чтобы сосредоточиться на том, как именно это делает Facebook, и вместо этого вы можете сделать то же самое.

Одним из способов достижения чего-то подобного было бы обнаружение размеров экрана пользовательского агента, что вы можете легко сделать в javascript проверка объекта Screen, После этого ваш код javascript может обновлять ссылки изображения на странице, чтобы указать на изображения с соответствующим размером, которые уже были созданы вашей CMS или каркасом.

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

Но это обсуждение поднимает большую точку зрения: если вы разрабатываете веб-сайт, вы, вероятно, используете CMS или, по крайней мере, какую-то структуру разработки. Очень вероятно, что на любой платформе, которую вы используете, есть плагин, модуль или т.д., С уже встроенными функциями кэширования изображений и изменения размера. Вероятно, вам следует описать, какую платформу вы используете, чтобы люди могли лучше реагировать на вашу ситуацию.

Ответ 3

CSS может использовать @Селектор мультимедиа для определения общей ширины/высоты. Этот метод не сможет определить точную ширину/высоту. Это даст вам общее представление о том, какие элементы вы хотите отобразить. С этого момента вы можете использовать относительные значения, чтобы изменить размер img-элемента. Чтобы определить точный размер экрана, вам нужно будет использовать Javascript. В JQuery вы можете получить доступ к ширине и высоте документа.

Facebook может создавать миниатюры в соответствии с максимальным размером их медиаселекторов. Когда размер img-элемента будет изменен, браузер автоматически изменит размер изображения позади. Если вы посмотрите на изображение с временной шкалы facebook, вы увидите суффикс "_n.jpg". Когда вы измените это на "_a.jpg", вы получите меньшую версию этого изображения.

Ответ 4

Отвечайте на свой вопрос номер 1:

Изменение размера изображения в Facebook относительно медленно. Причиной этого является (это мое предположение), что они используют некоторый размер javascript/jquery. У вас есть куча этих скриптов в Интернете.

Теперь это плохо (если изображение велико, это медленно). Решением для этого является использование инструментов разработчика Google Closure. Я потратил много времени (на несколько проектов, где мне нужно было сделать именно то, что вам нужно), чтобы понять это. Инструмент Closure (или apache mod_pagespeed) убивает ненужный пиксель из вашего изображения, делая его маленьким (в килобайтах/мб). Была проведена сессия из прошлого года Google IO, которая говорит об этом.

Это ссылка с этим сеансом.

Отвечайте на свой вопрос номер 2:

Я думаю, что они создают только два миниатюры.

Отвечайте на вопрос № 3:

В ответе номер 1 Я написал, что для этого используется код javascript/jquery. Возможно, для этого есть какая-то логика:

on window resize { 
  make div proportional resize (percent) -> 
  this div find image
  image width  height is div width height - offset
}

Я уверен, что лучший способ сделать это изменение размеров - не создавать миллионы миниатюр, а оптимизировать исходное изображение, убивать пиксели из него и изменять размер с помощью некоторого плагина jquery/javascript.