05.07.2020, 16:26
22.08.2017, 18:18
Добрый день! Я правильно понимаю, что «img-rounded center-block» центрует по горизонтали, а как выровнять по вертикали?
Александр Мальцев
23.08.2017, 17:48
С помощью CSS Flexbox это можно выполнить следующим образом:
19.07.2017, 22:36
Познавательная статья, спасибо!
Интересно, а как например сделать чтоб крайние (левая и правая) при манипуляции с окном уменьшались/увеличивались, а средняя имела постоянный размер? При этом крайние не залазили не на неё, не под неё…
Александр Мальцев
20.07.2017, 15:43
Для этого необходимо сделать разметку блока на CSS Flexbox.
Например, так:
В этом примере ширина центрального блока будет 300px, а крайние — будут делить оставшуюся ширину.
20.07.2017, 17:58
Спасибо!
Это так же полезно знать, но это не совсем то, задача такая. В среднем блоке элементы, форма с инпутами и кнопками. Необходимо что бы крайние элементы при определенном уменьшении экрана пропадали (пробую через сетку бутсрапа с помощью hidden), а средний блок всегда оставаясь в центре уменьшался незначительно, не сильно искажая форму внутри. Но если задать бекграунд картинку в див блоке, то она тянется вместе со всеми блоками.
20.07.2017, 18:59
Что-то типа такого:
11.04.2017, 09:56
Здравствуйте.
Расскажите пожалуйста про адаптивные изображения на основе клиентских подсказок (Client Hints). В сети про эту технологию мало информации. Хотелось бы более подробно про это узнать. Спасибо.
Александр Мальцев
12.04.2017, 07:40
Смысл данной технологии (Client Hints) заключается в том, чтобы послать серверу в составе запросов для получения изображений дополнительную информацию (DPR, Width, Viewport-Width — т.е. плотность пикселей экрана, его ширину и ширину viewport). Добавляется Client Hints в браузер легко посредством вставки в раздел head следующего тега:
После этого браузер в заголовочную информацию запроса для каждой картинки будет включать эти данные. Но это действие пока делает только браузер Chrome.
Самое сложное — это сервер. Получив такой запрос на сервере, вы должны его как-то обработать. Иначе в Client Hints не будет смысла. Т.е. необходимо написать серверный скрипт, который например, будет искать подходящую картинку по этим параметрам, и отдавать её клиенту (браузеру). А если картинки с нужными параметрами нет, то, например, её генерировать из исходного файла.
Т.е. как-то так. Жертвуя одним (процессорным временем и дисковым пространством) — вы получаете взамен что-то другое, в данном случае более быструю загрузку изображений (т.к. они будут отдаваться сервером в более оптимальном разрешении).
Но можно получить и обратный эффект (более долгую отдачу страниц), например, если вы используете виртуальный хостинг и процессор «слабенький» (или нагружен сильно).
03.02.2017, 07:19
Александр, спасибо за ресурс!
Вопрос по картинкам — у меня есть CMS, которая генерирует контент страницы, в т.ч. картинки. Там в форме редактора можно задавать для картинки класс. Можно ли как-то через это заставить картинку открываться красиво по типу lightbox? Bootstrap подключен, и разметка сайта на нем сделана.
Сейчас как раз использую lightbox, но это не подходит, т.к. надо вручную весь сгенерированный текст дополнять в тегах картинки свойствами типа:
data-lightbox="pic"
Александр Мальцев
03.02.2017, 16:42
Спасибо, за отзыв. Попробуйте добавить после загрузки страницы, ко всем картинкам имеющим класс pic, атрибут data-lightbox.
Использование изображений
Импортирование изображений в canvas в основном состоит из 2 этапов:
- Дав ссылку на HTMLImageElement объект или для другого canvas элемента как источник. Также можно использовать изображение дав ссылку на URL.
- Для рисования изображения на canvas используется функция drawImage() .
Давайте посмотрим как это сделать.
Использование изображений для рисования
Canvas API может использовать все перечисленные далее типы данных как источник изображения:
Эти изображения созданы, используя конструктор Image() , также как все элементы.
Есть несколько способов, чтобы получить изображения для использования на холсте.
Использование изображений из той же страницы
Мы можем получить ссылку на изображение, на той же странице, на canvas с используя один из способов:
- document.images коллекция
- The document.getElementsByTagName() метод
- Если вы знаете id конкретного изображения, который вы хотите использовать, вы можете использовать document.getElementById () , чтобы получить это конкретное изображение
Использование изображений из других доменов
Использование crossorigin атрибута элемент (отображается HTMLImageElement.crossOrigin (en-US) свойства), вы можете запросить разрешение на загрузку другого домена для использования в drawImage() . Если хостинг домен разрешает доступ к междоменному изображению, то изображение может быть использовано в вашем canvas без without tainting it;иначе он может испортить ваш canvas.
Использование других canvas элементов
Как и с обычными изображениями, мы можем получить доступ к другим canvas элементам используя либо document.getElementsByTagName() либо document.getElementById() метод. Проверьте, что в canvas источнике уже что-то нарисовано, прежде чем использовать его в целевом изображении canvas.
Одним из удобных способов было бы использование второго элемента canvas в качестве миниатюры другого большего изображения canvas.
Создание изображений с нуля
Другой способ это создать новые HTMLImageElement объекты в нашем скрипте. Чтобы это сделать, вы можете использовать удобный Image() конструктор:
var img = new Image(); // Создаёт новый элемент изображения img.src = "myImage.png"; // Устанавливает путь
Когда этот скрипт выполнится, изображение начнёт загружаться.
Если вы попытаетесь вызвать функцию drawImage() перед тем как изображение загрузится, то скрипт ничего не сделает (или, в старых браузерах, может даже выдать исключение). Поэтому вам необходимо использовать событие load, чтобы вы не пытались сделать это прежде, чем изображение загрузится:
var img = new Image(); // Создаёт новое изображение img.addEventListener( "load", function () // здесь выполняет drawImage функцию >, false, ); img.src = "myImage.png"; // Устанавливает источник файла
Если вы используете только одно стороннее изображение, то этот метод может быть хорошим примером, но если нужно следить за несколькими изображениями, то необходимо придумать что-то более умное. Хотя поиски тактики проверки загрузки изображений выходят за пределы этого обучающего курса, вы должны об этом помнить.
Вложение изображения с помощью данных: URL
Другой возможный способ включить изображение это через data: url (en-US) . Data URLs позволяет вам полностью определить изображение как Base64 кодированную строку символов прямо в ваш код.
var img = new Image(); // Создаёт новый элемент img img.src = "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw= token punctuation">;
Одним из преимуществ data URLs это то что полученное изображение доступно сразу без других запросов туда-обратно на сервер. Другое потенциальное преимущество в том, что также можно инкапсулировать всё в одном файле все ваши CSS, JavaScript, HTML, и изображения, что делает его более портативным в других местах.
Некоторые недостатки этого метода в том что ваше изображение не кешировано, и для изображений с большим размером кодирование url может стать очень долгим процессом.
Использование кадров из видео
function getMyVideo() var canvas = document.getElementById("canvas"); if (canvas.getContext) var ctx = canvas.getContext("2d"); return document.getElementById("myvideo"); > >
Эта функция вернёт HTMLVideoElement объект для этого видео, который, как мы упоминали ранее, является одним из объектов, который можно использовать как CanvasImageSource .
Рисование изображений
Как только мы получили ссылку на источник объекта изображения, мы можем использовать метод drawImage() для включения его в canvas. Как мы увидим далее, метод drawImage() перегружен и у него есть несколько вариантов. В базовом варианте он выглядит как:
Рисует изображение, указанное в CanvasImageSource в координатах ( x , y ).
Примечание: SVG изображения должны указывать ширину и высоту корневого элемента.
Пример: Простой линейный график
В следующем примере, мы будем использовать внешнее изображение в качестве фона для небольшого линейного графика. Использование фонов может сделать ваш скрипт значительно меньше, потому что мы можем избежать необходимости писать код для создания фона. В этом примере мы используем только один образ, поэтому я использую обработчик событий изображения объекта загрузки для выполнения операторов рисования. drawImage() метод определяющий место фона с координатами (0, 0), которые привязаны к верхнему левому углу canvas.
html> body onload="draw();"> canvas id="canvas" width="180" height="150">canvas> body> html>
function draw() var ctx = document.getElementById("canvas").getContext("2d"); var img = new Image(); img.onload = function () ctx.drawImage(img, 0, 0); ctx.beginPath(); ctx.moveTo(30, 96); ctx.lineTo(70, 66); ctx.lineTo(103, 76); ctx.lineTo(170, 15); ctx.stroke(); >; img.src = "backdrop.png"; >
Получившийся график выглядит так:
Изменение размеров
Второй вариант метода drawImage() добавляет два новых параметра и позволяет разместить изображение в canvas с изменёнными размерами.
Это добавляет параметр ширины и высоты, которые указывают до какого размера нужно изменить изображение при рисовании его в canvas.
Пример: Тайлинг изображения
В этом примере, мы будем использовать изображение в качестве обоев и повторим его в canvas несколько раз. Это может быть сделано просто через цикл, располагая изменённые изображения на разных позициях. В коде внизу, первый цикл for проходит по рядам. Второй цикл for проходит по колонкам. Изображение уменьшено на треть от реального размера, которое было 50×38 пикселей.
Примечание: Изображения могут стать размытыми, при большом увеличении или зернистыми при значительном уменьшении. Возможно, лучше всего не изменять размеры изображения, если на них есть текст, который должен остаться читаемым.
html> body onload="draw();"> canvas id="canvas" width="150" height="150">canvas> body> html>
function draw() var ctx = document.getElementById("canvas").getContext("2d"); var img = new Image(); img.onload = function () for (var i = 0; i 4; i++) for (var j = 0; j 3; j++) ctx.drawImage(img, j * 50, i * 38, 50, 38); > > >; img.src = "rhino.jpg"; >
Получившийся рисунок canvas выглядит так:
Нарезка
У третьего и последнего варианта метода drawImage() в дополнении к источнику изображения есть ещё восемь параметров . Он позволяет нам вырезать кусок из изображения, затем изменить его размер и нарисовать его в canvas.
В данном изображении, эта функция берёт фрагмент из изображения, в виде прямоугольника, левый верхний угол которого — ( sx , sy ), ширина и высота — sWidth и sHeight и рисует в canvas, располагая его в точке ( dx , dy ) и изменяя его размер на указанные величины в dWidth и dHeight .
Чтобы понять что делает нарезка, можно посмотреть на изображение справа. Первые четыре параметра определяют местоположение и размер фрагмента исходного изображения. Последние четыре параметра определяют прямоугольник, в который будет вписано изображение на целевом рисунке canvas.
Нарезка может быть полезным инструментом, когда вы захотите сделать композицию. Вы могли бы собрать все элементы в одном файле изображения и использовать этот метод для создания композиции. Например, если вы захотите сделать график, вы могли бы сделать PNG изображение, содержащее все необходимые тексты в одном файле и в зависимости от ваших данных, могли бы достаточно просто изменять график. Другим преимуществом является то, что нет необходимости загружать каждое изображение по отдельности, получив возможность увеличить скорость загрузки.
Пример: Обрамление изображения
В этом примере, мы будем использовать того же носорога, что и в предыдущем примере, но мы отрежем его голову и включим её в рамку. Изображение рамки это 24-х битный PNG, который включает падающую тень. Так как в 24-х битные PNG изображения включается полный 8-ми битный альфа-канал, в отличие от GIF и 8-битных PNG изображений, он может быть помещён в любой фон, без беспокойства о матовом цвете.
html> body onload="draw();"> canvas id="canvas" width="150" height="150">canvas> div style="display:none;"> img id="source" src="rhino.jpg" width="300" height="227" /> img id="frame" src="canvas_picture_frame.png" width="132" height="150" /> div> body> html>
function draw() var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // Рисуем фрагмент ctx.drawImage( document.getElementById("source"), 33, 71, 104, 124, 21, 20, 87, 104, ); // Рисуем рамку ctx.drawImage(document.getElementById("frame"), 0, 0); >
В этот раз мы применили другой способ загрузки изображения. Вместо загрузки методом создания новых HTMLImageElement объектов, мы включили их как тэги прямо в наш HTML файл и из них выбрали изображения. Изображения скрыты с помощью CSS-свойства display , установленного в «none» для этих изображений.
Скрипт, сам по себе, очень простой. Каждому присвоен атрибут ID, который делает удобным их выбор с использованием document.getElementById() . Потом мы просто используем функцию drawImage() , чтобы из первого изображения вырезать фрагмент носорога и вставить его в canvas, затем рисуем рамку сверху, используя второй вызов функции drawImage() .
Пример галереи искусства
В последнем примере этой главы, мы построим небольшую галерею искусств. Галерея состоит из таблицы, включающей несколько изображений. Когда страница загрузится, элемент вставится в каждое изображение, а вокруг будет нарисована рамка.
В этом случае, у каждого изображения фиксированная ширина и высота, такая же, как и у рамки нарисованной вокруг них. Вы могли бы усовершенствовать этот скрипт так, чтобы он использовал ширину и высоту изображения, чтобы рамка идеально его окружила.
Код ниже должен говорить сам за себя. Мы проходим циклом через document.images контейнер и соответственно добавляем новые элементы canvas. Возможно следует упомянуть для тех, кто не слишком хорошо знаком с DOM, что для этого используется Node.insertBefore метод. insertBefore() это метод родительского узла (ячейки таблицы) элемента (изображения) перед которым мы хотим вставить наш новый узел (элемент canvas).
html> body onload="draw();"> table> tr> td>img src="gallery_1.jpg" />td> td>img src="gallery_2.jpg" />td> td>img src="gallery_3.jpg" />td> td>img src="gallery_4.jpg" />td> tr> tr> td>img src="gallery_5.jpg" />td> td>img src="gallery_6.jpg" />td> td>img src="gallery_7.jpg" />td> td>img src="gallery_8.jpg" />td> tr> table> img id="frame" src="canvas_picture_frame.png" width="132" height="150" /> body> html>
И сюда какую-нибудь CSS для украшения:
body background: 0 -100px repeat-x url(bg_gallery.png) #4f191a; margin: 10px; > img display: none; > table margin: 0 auto; > td padding: 15px; >
Связывая все вместе JavaScript рисует наши изображения в рамках:
function draw() // Цикл по всем изображениям for (var i = 0; i document.images.length; i++) // Не добавляет canvas для изображения рамки if (document.images[i].getAttribute("id") != "frame") // Создаёт элемент canvas var canvas = document.createElement("canvas"); canvas.setAttribute("width", 132); canvas.setAttribute("height", 150); // Вставляет перед изображением document.images[i].parentNode.insertBefore(canvas, document.images[i]); var ctx = canvas.getContext("2d"); // Рисует изображение в canvas ctx.drawImage(document.images[i], 15, 20); // Добавляет рамку ctx.drawImage(document.getElementById("frame"), 0, 0); > > >
Контроль изменений размеров изображения
Как было отмечено ранее, изменение размеров изображений может привести к размытости или к шуму в процессе преобразования. Вы можете использовать контекст рисования imageSmoothingEnabled (en-US) свойства, чтобы контролировать использование сглаживающего алгоритма, когда изменяющиеся изображения в вашем контексте. Обычно это свойство установлено в true , означая, что изображения будут сглажены во время изменения размеров. Вы можете отключить это свойство так:
.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false;
- « Предыдущая статья
- Следующая статья »
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Оптимизация загрузки изображений
Привет, Хабр! Представляю вашему вниманию перевод статьи «How to optimize image loading on your website».
Если на сайте много красивых изображений, то это здорово, но они могут значительно ухудшить время загрузки и как результат — пострадает SEO, а многие пользователи будут закрывать сайт еще до того, как он загрузится. Нередко бывает, что несколько мегабайт изображений загружаются просто, чтобы показать слайдер на главной странице.
Представьте, что вы заходите на такой сайт через медленный мобильный интернет, это может занять очень много времени и большинство пользователей в такой ситуации просто закроют ваш сайт еще до его загрузки. Хороший способ протестировать это — воспользоваться возможностью ограничить скорость интернета через Chrome Devtools.
Проблема
Проблема в том, что часто бывает так, что сам контент уже загружен, а изображения все еще загружаются. В итоге пользователь может увидеть пустое пространство там, где изображения загружаются медленно. Это явно не то, чего вы хотели бы.
В примере ниже я создал простой сайт с фоновым изображением, которое весит 4.8Мб. Как вы можете видеть, DOM загрузился за 1.14 секунды, т.е. фактически пользователь видит содержимое через 1.14 секунды, что довольно неплохо для 3G интернета. Однако, фоновое изображение загружается за 27.32 секунды. За это время пользователь может уже уйти с вашего сайта.
И от этого страдает не только пользовательский опыт. В 2010 Google заявили, что скорость загрузки — это один из факторов в их алгоритме ранжирования и я думаю, что в будущем этот фактор будет становиться все более важным.
Решение
Так, как же решить эту проблему? Ну, для начала мы можем просто сжать наше фоновое изображение, используя различные инструменты. Например, TinyPNG, ImageOptimizer или JPEGmini. Это будет легкой победой и уменьшит время загрузки до ~10 секунд. И хотя это выглядит, как огромный шаг в решении, но 10 секунд все еще слишком много.
Следующим шагом может стать загрузка изображения-заглушки перед загрузкой изначального изображения. Заглушка — это версия оригинального изображения, но с низким разрешением. Когда мы создаем такое изображение, то уменьшаем разрешение с 7372×4392 пикселей до 20×11. В итоге размер изображения уменьшается с 4.8Мб до 900 байтов.
Это позволит уменьшить скорость загрузки с 10 секунд до 550 миллисекунд. Но теперь в качестве фона у нас заблюренное изображение с низким разрешением. Это отличное решение, пока страница загружается первые секунды, но все таки мы хотим показать пользователям оригинальное изображение с высоким разрешением.
Для этого нам придется сначала загрузить изображение с низким разрешением, а уже потом асинхронно в фоне загрузить оригинал с высоким разрешением и, когда версия с высоким разрешением загружена, мы можем поставить ее на место изображения-заглушки. Для этого я использовал нижеприведенный код перед .
Этот код ищет элементы с классом asyncImage , после чего загружает все изображения, указанные в атрибуте data-src , а как только изображение загрузилось, заменит src для элемента ![]()
, а для остальных элементов установит фоновое изображения через css.
Поскольку скрипт удаляет класс у элемента после загрузки изображения, то при желании мы можем сделать красивую анимацию с помощью CSS. Например, ease-in-out анимация позволит сделать исчезновение заглушки, когда заменяется изображение.
Заключение
Так чего мы добились? Мы улучшили пользовательский опыт, ускорили загрузку сайта, сделали его более доступным для пользователей без быстрого интернета и возможно улучшили наше ранжирование в Google. Это огромные улучшения для такого маленького изменения.
Как вы можете видеть мы загружаем заглушку за 570 миллисекунд, как только она загрузится пользователь будет видеть заблюренную версию с низким разрешением нашего оригинального изображения, а как только загрузится оригинальное изображение, оно заменит версию с низким разрешением.
Ленивая загрузка изображений
Если вы захотите пойти дальше и еще сильнее улучшить загрузку изображений, то возможно вам пригодится ленивая загрузка изображений.
Ленивая загрузка — это техника, когда изображения за пределами видимой области страницы не загружаются, пока изображение не приблизится к краю видимой области.
Ее преимущество в том, что во время первоначальной загрузки будет загружено меньше данных, так как очень часто лишь малая часть изображений отображается в видимой области страницы, а остальные можно загружать по мере того, как пользователь скроллит. Для реализации этого лучше всего подходит Intersection Observer.
- javascript
- разработка
- графика
- оптимизация изображений
- JavaScript
- Клиентская оптимизация
- Обработка изображений
Как загрузить картинку через css
Когда занимаешься версткой и созданием всяких хитростей с картинками (обычно с подменой при наведении или даже их анимацией), всегда вспылывает такой нюанс как заторможенная подгрузка картинки/изображения. На первый взгляд проблема не такая уж серьезная и, как только картинки загрузятся, все работает отлично, но вот этот первый hover эффект, который пытается загрузить картинку и одновременно заменить её, создает такой эффект рывка, который не редко смотрится не очень красиво и может испортить первое впечатление пользователей вашего сайта.
С анимацией дела обстоят еще хуже. Представьте, например, что вам нужно реализовать на JS (JQuery) проезжаюшую легковую машину, заменяюшуюся через 2 секунды автобусом. Изображения с машиной и автобусом разные. При этом они начнут подгружаться только в тот момент, когда браузер получит на них ссылку с возможностью подгрузки (то есть в начале анимации). На загрузку такой картинки нужно будет несколько секунд. То есть получается, что половину двухсекундной анимации это изображение только будет подгружаться — это не порядок.
Но это все можно исправить предзагрузкой (предварительной загрузкой) изображений, которая позволяет подгружать картинку в буфер сразу при загрузке основной страницы (или даже перед этим). Об этом я и хочу рассказать в данной заметке.
Предзагрузка картинок на JavaScript (JQuery)
Вариант с загрузкой на JS, как мне кажется, один из самых лучший, особенно если вы имеете дело с анимацией. Его суть в том, что вы просто посредством JavaScript создаете копию картинки и загружаете её в буфер браузера, тем самым при необходимости уже не нужно будет подгружать картинку, так как она уже будет предварительно загружена.
Сложно звучит? =) А выглядит всего лишь вот таким кодом, где нужно заменить путь к картинке на свой и все будет работать:
//создаем JQuery функцию, которая будет подгружать изображения в буфер jQuery.preloadImages = function() < for(var i = 0; i < arguments.length; i++) < jQuery("![]()
").attr("src", arguments[ i ]); > >; //указываем путь к изображению, которое нужно подгрузить $.preloadImages("/tpl/testimg.png");
Если же вам нужно подгрузить несколько изображений, то вы просто можете перечислить их через запятую, вот так:
$.preloadImages("imageone.jpg", "dirname/imageok.jpg", "/tpl/testimg.png");
Картинок может быть любое количество. Главное не забывайте про JQuery функцию, без нее предзагрузка работать не будет.
У этого способа есть и недостатки, например в том, что он зависит от того, включен ли JS в браузере пользователя. Но по личному опыту скажу, что если равняться на тех, у кого выключен JS, то в современных технологиях сайтостроения очень много не удастся реализовать. Да и таких юзеров, я думаю, не так уж много. Вообще нужно равняться на большинство, а большинство не кастомизирует браузер до такой степени.
Я лично во многих проектах предпочитаю использовать именно такой способ подгрузки ввиду того, что он удобен в реализации.
Предзагрузка изображений с помощью новых возможнестей HTML5
Этот способ появился относительно недавно ввиду того, что сама технология HTML5 была запущена не так давно. Суть его в том, что вы проставляете ссылку на картинку через тег link, а в атрибуте rel (тип подгружаемого элемента) вы прописываете, что это предзагрузка. Тем самым браузер видит этот тег и автоматически загружает в буфер картинку.
Делается это добавлением в html код вот такого тега (только ссылку на изображение меняете на свою):
Здесь в rel прописано 2 параметра: prerender — для его величества Chrome и prefetch — для остальных браузеров. Если вы хотите подгружать большее число картинок, то копируете тег и заменяете ссылку нужное количество раз:
Плюс этого способа в том, что отключение JS никак не повлияет на предзагрузку, но лично я вижу 2 явных недостатка:
1) Технология HTML5, а значит и этот способ предзагрузки, поддерживается далеко не всеми браузерами. Сейчас, правда, браузеры обновляются и большинство современных развивающихся браузеров распознают HTML5, но всеравно это еще далеко от идеала.
2) Более грамоздкий в отличае от JS реализации, ведь придется каждое изображение описывать отдельным тегом (причем с разными параметрами rel, что бы добиться чего-то близкого к кроссбраузерности).
В общем считаю, что этот способ перспективен, но ему нужно время. Сейчас в нем не хватает универсальности.
Предварительная загрузка картинок на проверенном временем HTML
Самая первая идея, которая приходит обычно в голову на чистом html — это создать div блок с параметром CSS «display:none;», в нем картинку и это должно стать предзагрузкой. На самом деле это не работает, браузер начнет загрузку в буфер только тогда, когда display станет отличное от none.
Но я придумал способ с использованием хитростей CSS. Расскажу подробнее про него.
Размещение в невидимом блоке через CSS opacity и position (позиционирование)
В CSS есть такое свойство — opacity. Его предназначение — менять прозрачность и изменить прозрачность можно вплоть до нуля. Кроме того, в CSS есть еще и свойство position, которое нужно для позиционирования элемента на странице (можно попиксельно сдвигать блок с информацией хоть куда в пределах и за пределы видимости страницы). Все это нам и пригодится:
Тем самым мы получаем невидимый блок c картинкой, который еще и фактически расположен за пределами видимой пользователю информации. Таким видом позиционирования за пределами экрана, кстати, часто пользуются, если хотят создать какой-то невидимый блок, частенько видел как вшивают ссылки на бесплатные шаблоны именно таким образом. Так что вы тебе все знаете =)
Если вы хотите сделать прелоад нескольких картинок таким способом, то достаточно их указать внутри div блока, вот так:
Виталий Жуков 
06.03.2015
Заголовок для текста Текст поверх изображения. 
