Есть ли способ заменить значок браузера по умолчанию, который еще не загружен?

(Обратите внимание, что это не относится к битым изображениям как к дубликату ранее заданных вопросов).

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

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

Было бы здорово, если бы им это понравилось?

http://screencast.com/t/qlTUN9Z3MO

а не как это

http://screencast.com/t/qlTUN9Z3MO

Это можно сделать?


javascript browser image photos
person metalaureate    schedule 07.07.2013    source источник
comment
@zerkms, я интерпретировал это как незавершенное, а не 404. Саймон, что ты имел в виду?   -  person Brigand    schedule 07.07.2013
comment
Понятия не имею, как это можно было закрыть как дубликат. Похоже, у нас тут несколько счастливых людей.   -  person user123444555621    schedule 08.07.2013

Ответы (1)


arrow_upward
2
arrow_downward

Я рекомендую использовать SVG background-image в вашем CSS. Вы также можете масштабировать его в соответствии с пропорциями экрана, используя background-size документ. Кроме того, не забудьте установить размер вашего img (с атрибутами CSS или HTML), а не позволять ему использовать размер изображения.

Во-первых, вам понадобится фоновый файл svg. Вы можете использовать простой синтаксис background-image: url(x.svg) или рассмотреть возможность использования URL-адреса данных. Существует бесплатный инструмент для их кодирования.

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

background-size: auto 100%; /* Vertical (full height) */
background-size: 100%; /* Horizontal (full width) */

Теперь, когда ваше изображение загружается, вместо него будет отображаться background-image. Как только он загружен; он закроет фон (предполагается, что он полностью непрозрачен).

person Brigand    schedule 07.07.2013
comment
Я также нашел этот [blog.embed.ly/ post / 51071740487 / что очень круто. - person metalaureate; 07.07.2013