Каков допустимый способ включить изображение без src?



У меня есть изображение, которое я буду динамически заполнять src позже с помощью javascript, но для удобства я хочу, чтобы тег image существовал на pageload, но просто ничего не отображал. Я знаю <img src='' /> является недопустимым, так что это лучший способ сделать это?

589   13  

13 ответов:

Хотя нет никакого действительного способа опустить Источник изображения, там are источники, которые не будут вызывать попадания на сервер. Недавно у меня была аналогичная проблема с iframe s и определяется //:0 Для быть лучшим вариантом. Нет, правда!

начиная с // (опуская протокол) приводит к использованию протокола текущей страницы, предотвращая предупреждения "небезопасного содержимого" на страницах HTTPS. Пропуск имени хоста не является необходимым, но делает его короче. Наконец, порт :0 гарантирует, что запрос сервера не может быть сделан (это не допустимый порт, согласно спецификации).

Это единственный URL, который я нашел, не вызвал никаких обращений к серверу или сообщений об ошибках в любом браузере. Обычный выбор - javascript:void(0) - вызовет предупреждение "небезопасное содержимое" в IE7, если оно используется на странице, обслуживаемой через HTTPS. Любой другой порт вызвал попытку подключения к серверу, даже для недопустимых адресов. (Некоторые браузеры просто сделают недопустимый запрос и дождутся их времени из.)

Это было протестировано в Chrome, Safari 5, FF 3.6 и IE 6/7/8, но я ожидал бы, что он будет работать в любом браузере, так как это должен быть сетевой уровень, который убивает любые попытки запроса.

другой вариант-вставить пустое изображение. Любое изображение, которое подходит для вашей цели, будет сделано, но следующий пример кодирует GIF, который составляет всего 26 байт-от http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />

редактировать на основе комментария ниже:

конечно, вы должны учитывать требования к поддержке Вашего браузера. Поддержка IE7 или менее не заметна. http://caniuse.com/datauri

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

также посмотреть prepend и append. В противном случае, если у вас есть такой тег изображения, и вы хотите его проверить, вы можете рассмотрите возможность использования фиктивного изображения, такого как 1px прозрачный gif или png.

Я не делал этого в то время, но я должен был пройти через это же самое однажды.

<img src="about:blank" alt="" />

Это мой любимый - the //:0 подразумевается, что вы попытаетесь установить соединение HTTP/HTTPS с исходным сервером на нулевом порту (Порт tcpmux?)- что, вероятно, безвредно, но я бы предпочел не делать этого в любом случае. Черт, браузер может увидеть нулевой порт и даже не отправить запрос. Но я все же предпочел бы, чтобы это не было указано таким образом, когда это, вероятно, не то, что вы означать.

в любом случае, рендеринг about:blank на самом деле очень быстро во всех браузерах, которые я тестировал. Я просто бросил его в валидатор W3C, и он не жаловался, поэтому он может быть даже действительным.

Edit: не делайте этого; он не работает во всех браузерах (он покажет значок "сломанное изображение", как указано в комментариях к этому ответу). Используйте <img src='data:... Решение ниже. Или если вы не заботитесь о действительности, но все же хотите избежать лишних запросов к сервер, вы можете сделать <img alt="" /> без атрибута src. Но это недействительным HTML так что выбирайте это тщательно.

тестовая страница показывает целую кучу различных методов:http://desk.nu/blank_image.php - подается со всеми видами различных типов документов и контента. - как уже упоминалось в комментариях ниже, используйте новую тестовую страницу Марка Ормстона по адресу:http://memso.com/Test/BlankImage.html

как написано в комментариях, этот метод неверен.

Я не нашел этот ответ раньше, но согласно Спецификации W3 действующий пустые src тег будет якорной ссылкой #.

пример: src="#",src="#empty"

страница успешно проверяется и никаких дополнительных запросов не делается.

Если вы сохраняете атрибут src пустым, браузер отправит запрос на текущий url-адрес страницы всегда добавляйте 1 * 1 прозрачный img В атрибут src, если не хотите никакого url

src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="

Я обнаружил, что просто установка src в пустую строку и добавление правила в ваш CSS, чтобы скрыть значок сломанного изображения, работает просто отлично.

[src=''] {
    visibility: hidden;
}

Я нашел, что с помощью:

<img src="file://null">

не будет делать запрос и проверяет правильно.

браузеры просто заблокируют доступ к локальной файловой системе.

но там может быть ошибка отображается в консоли войти в Chrome, например:

Not allowed to load local resource: file://null/

используйте действительно пустой, действительный и очень совместимый SVG, основанный на этом статьи:

src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"

он будет по умолчанию размером до 300x150px, как и любой SVG, но вы можете работать с этим в своем img элементы стилей по умолчанию, как вы, возможно, потребуется в любом случае в практической реализации.

Я лично использую about:blanksrc и разобраться с сломанной значок изображения, установив непрозрачность img элемент 0.

основываясь на ответе Бена Бланка, единственный способ, которым я получил это для проверки в валидаторе w3, был таким:

<img src="/./.:0" alt="">`
<img src="invis.gif" />

где invis.gif-это один пиксельный прозрачный gif. Это не сломается в будущих версиях браузера и работает в устаревших браузерах с 90-х годов.

png тоже должен работать, но в моих тестах gif был 43 байта, а png-167 байт, поэтому gif выиграл.

п.С. не забывайте теге Alt, валидаторы тоже.

просто, вот так:

<img id="give_me_src"/>

Comments

    Ничего не найдено.