Каков допустимый способ включить изображение без src?
У меня есть изображение, которое я буду динамически заполнять src позже с помощью javascript, но для удобства я хочу, чтобы тег image существовал на pageload, но просто ничего не отображал. Я знаю <img src='' /> является недопустимым, так что это лучший способ сделать это?
13 ответов:
Хотя нет никакого действительного способа опустить Источник изображения, там are источники, которые не будут вызывать попадания на сервер. Недавно у меня была аналогичная проблема с
iframes и определяется//: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, валидаторы тоже.
Comments