Самый надежный способ предварительной загрузки изображения для предотвращения загрузки видимого изображения? (Без JS)

Я только что закончил создание функции загрузки изображений и немного разочарован.

Во время посещения страницы, содержащей одну или несколько фотографий, я испытываю:

  • Длительное время загрузки (~ 0,5 сек.).

  • Неэстетичная загрузка изображения (вы можете видеть загрузку фотографий сверху вниз).

Мой вопрос: Как я могу убедиться, что вся фотография загружена перед тем, как представить ее пользователю (я пытаюсь выяснить способ полной загрузки image до body) без использования Javascript?

Примечание. Этот вопрос предполагает, что фото загружается из кеша папки в том же каталоге.

ОТВЕТЫ

Ответ 1

1. Прогрессивный JPEG

Чтобы избежать загрузки "сверху вниз" изображения, вы можете использовать "прогрессивную jpeg", которая отображает "размытую" версию изображения во время загрузки вместо "сверху вниз": Ex.: http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html

2. Встроенный (закодированный в base64)

Если вы действительно хотите показывать изображения и страницу одновременно, вы должны закодировать их как base64 и включить их на свою страницу:

<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." alt="" />

Вы можете сделать это через PHP или на любой стороне сервера script.

<img src="data:image/jpeg;base64,<?=base64encode(file_get_contents($file_path))?>" alt="" />

https://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

3. Замаскировано как таблицы стилей (ужасный взлом)

Если вы хотите выполнить рендеринг блока перед загрузкой изображений, вы можете удвоить изображения на своей странице в теге <link rel=stylesheet> в разделе <head> на странице.

Браузеры не будут показывать страницу до загрузки CSS, даже если ваши файлы не являются CSS, они будут загружать и кэшировать их, а после загрузки будет отображаться страница, а ваши изображения будут загружены из кеша.

<html>
<head>
  <link rel="stylesheet" href="your_image_01.jpg" />
  <link rel="stylesheet" href="your_image_02.jpg" />
</head>
<body>
...
  <img src="your_image_01.jpg" alt="" />
  ...
  <img src="your_image_02.jpg" alt="" />
...
</body>
</html>

Ответ 2

Я не думаю, что вы можете сделать это без javascript.

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

Почему вы не хотите использовать javascript?

Ответ 3

Использование http2/spdy позволит вам использовать атаки на стороне сервера и даст вам контроль на стороне сервера, когда и как можно получить изображения. Вы можете попробовать таким образом, но я думаю, что использование javascript - это более простой путь.

Ответ 4

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

$im = file_get_contents('filename.gif');
$imdata = base64_encode($im);  
//taken from http://stackoverflow.com/questions/35879/base64-encoding-image

чем на запросе сервера после подтверждения загрузки, сгенерируйте встроенный стиль css и поместите результат в виде div.

Конечно, включите gzip/deflate в htaccess. Литте бессмысленно появляется первое изображение, но кто знает...

Ответ 5

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

Ответ 6

Использует ли ссылка Prefetching выполнить то, что вы хотите? Это не будет идеально для каждого пользователя, но это может быть простой способ выполнить то, что вы хотите.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ

Только для одного изображения: <link rel="prefetch" href="/images/big.jpeg">

Для всей страницы: <link rel="next" href="2.html">

Для содержимого страницы предварительного просмотра: <link rel="prerender" href="2.html">

Эти теги должны размещаться в разделе заголовков html-сайтов.

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

https://jack.ofspades.com/prefetching-preloading-and-prerendering-content-with-html/

Другой способ, который может сработать для вас: https://perishablepress.com/a-way-to-preload-images-without-javascript-that-is-so-much-better/

Ответ 7

Попробуйте загрузить его в качестве фона другого элемента.

Или загрузите его в скрытый элемент (display: none).

#tinyElement{ background: url(images/picture.png) no-repeat -9999px -9999px; }

Также см.: https://css-tricks.com/snippets/css/css-only-image-preloading/

Ответ 8

Это невозможно сделать только с помощью PHP (исключая методы, связанные с загрузкой DOM и HTML, рекомендуемым способом было бы использовать наблюдателя и запустить событие при обнаружении завершения загрузки изображения).

Однако есть способы ускорить загрузку изображений в PHP:

Убедитесь, что изображения хранятся в каталоге, а не как BLOB

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

Изменение размера локально

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

$source_imagex = imagesx($source_image);
$source_imagey = imagesy($source_image);
$dest_imagex = AVATAR_IMAGE_WIDTH;
$ratio = $dest_imagex / $source_imagex;
$dest_imagey = $ratio * $source_imagey;
$dest_image = imagecreatetruecolor($dest_imagex, $dest_imagey);
$image = imagecopyresampled($dest_image, $source_image, 0, 0, 0, 0, $dest_imagex, $dest_imagey, $source_imagex, $source_imagey);

Вы можете правильно вычислить ширину и высоту изображения до размера, чтобы поддерживать соотношение сторон. Константа AVATAR_IMAGE_WIDTH может быть установлена ​​на все (или AVATAR_IMAGE_HEIGHT), или вы можете настроить переменные по своему вкусу. Это не позволит CSS загружать DOM и загружать изображение в полный размер, а затем изменять его размер в любом месте.