Избегайте показа пошагового рендеринга таблицы изображений

Question

У меня есть веб-сайт, который отображает картинки в виде HTML-таблицы. Когда я нажимаю на страницу, она показывает ее постепенную загрузку и изменение размера таблицы в зависимости от размеров изображения.

Есть ли лучший способ сделать это, поэтому я либо:

подождите и покажите таблицу один раз после того, как она готова к раздирке, чтобы избежать добавочной загрузки показывая некоторую «загрузку.» обновлять до тех пор, пока он полностью не отобразит

Answer 1

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

Answer 2

Укажите высоту и ширину каждого изображения как часть тега HTML (будь то с помощью CSS или атрибутов height / width самого тега img). Таким образом, браузер знает, сколько места на экране нужно выделить для изображения (и, следовательно, как выложить страницу), прежде чем он полностью загрузит файл изображения.

Это даже часть рекомендаций Google по оптимизации PageSpeed ​​.