Как вытащить значение data-src из img?
Вы находите коллекцию, а не элемент.
Нужно либо перебрать её через цикл, либо взять первый элемент: $html->find(‘.thumb img[data-src]’, 0) .
А там легко взять атрибут: $d-> .
Заметьте, $d->data-src не будет работать, т. к. выходит взятие поля и минус. константа?
Отслеживать
ответ дан 30 окт 2016 в 16:59
user207618 user207618
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как изменить атрибут img data-src на src в javascript используя jQuery?
Как изменить атрибут img data-src на src в javascript используя jQuery?
Для программной оптимизации сайта путем повышения скорости, используется метод отложенной lazy загрузки изображений
Делается это путем замены атрибута data-src на обычный src в теге img через JS Рабочий пример на jQuery:
Изменение атрибута data-src на src в HTML теге img используя только javascript
HTML код примера, где blank.gif — фоновое фото небольшого размера
- PHP
- JavaScript (JS)
- Программная оптимизация сайта
- jQuery
Помогла ли вам статья?
346 раз уже помогла
Комментарии: (0) Написать комментарий
КАТЕГОРИИ
- Создание Интернет магазина
- Создание корпоративного сайта
- Создание сайта каталога
- Создание сайта визитки
- Создание Landing page
- Создание эксклюзивного проекта
- Создание сайта для дропшиппинга
- Создание сайта для продажи
- Создание новостного сайта
- Создание сайта для доставки еды
- Создание сайта для строительной компании
- Создание сайта для юридической фирмы
- Создание сайта для агентства недвижимости
- Создание сайта для салона красоты
- Создание сайта мебели
- Создание сайта сантехники
- Создание интернет-магазина кофе и чая
- Создание интернет-магазина одежды
- Создание интернет-магазина косметики
- Создание интернет-магазина кондитера
- Создание интернет-магазина парфюмерии
- Создание интернет-магазина игрушек
- Создание интернет-магазина посуды
- Создание интернет-магазина электроники
- Создание интернет-магазина строительных материалов
- Создание интернет-магазина интимных товаров
- Создание интернет-магазина спортивных товаров
- Создание сайта для турагентства
- Разработка сайта по трудоустройству
- Создание сайта для хостинг компании
- Создание сайта для психолога
- Создание сайта для гос. организации
- Создание сайта для стоматологии
- Создание сайта для украинской православной церкви
- Создание интернет-магазина мужской и женской обуви
- Создание интернет-магазина сумок и чемоданов
- Разработка интернет-магазина удобрений и семян
- Разработка сайта по проведению онлайн семинаров
- Создание сайта по аренде автобусов
- Создание сайта по ремонту техники
- Создание сайта по изделиям из камня и мрамора
- Изготовление магазина медицинского оборудования
- Изготовление сайта для учителя или репетитора
- Изготовление сайта для кафе или ресторана
- Разработка сайта для гостиницы, отеля
- Создание сайта для фотографа
- Создание интернет-магазина аптеки
- Проектирование сайта для дистанционного обучения
- Интернет-магазин товаров для животных
- Создание сайта для цветочного магазина
- Изготовление сайта ворот и ограждений
- Создание сайта для продажи товаров
РЕГИОНЫ
- Продвижение и реклама сайта в Виннице
- Продвижение и реклама сайта в Киеве
- Продвижение и реклама сайта в Луцке
- Продвижение и реклама сайта в Днепре
- Продвижение и реклама сайта в Донецке
- Продвижение и реклама сайта в Житомире
- Продвижение и реклама сайта в Ужгороде
- Продвижение и реклама сайта в Запорожье
- Продвижение и реклама сайта в Ивано-Франковске
- Продвижение и реклама сайта в Луганске
- Продвижение и реклама сайта в Кировограде
- Продвижение и реклама сайта в Львове
- Продвижение и реклама сайта в Николаеве
- Продвижение и реклама сайта в Одессе
- Продвижение и реклама сайта в Полтаве
- Продвижение и реклама сайта в Ровно
- Продвижение и реклама сайта в Сумах
- Продвижение и реклама сайта в Тернополе
- Продвижение и реклама сайта в Харькове
- Продвижение и реклама сайта в Херсоне
- Продвижение и реклама сайта в Хмельницком
- Продвижение и реклама сайта в Черкассах
- Продвижение и реклама сайта в Чернигове
- Продвижение и реклама сайта в Черновцах
- Продвижение и реклама сайта в Кривом Роге
Куда добавить атрибут data-src?
Чтобы картинки с сайта попали в поиск Яндекс.Картинок, страницы сайта должны быть проиндексированы. Из проиндексированных страниц извлекается информация об изображениях.
Картинки скачиваются по ссылкам из атрибута src тега img, а также атрибутов data-src и data-original (в этом случае наличие ссылки на изображение в атрибуте src не обязательно).
У меня было так, та как нужно чтоб индексировалось большое изображение, а не 200 на 200, то добавил
Правильно ли его добавлять в тег img? или можно в ссылку? как вообще правильней?
- Вопрос задан более двух лет назад
- 564 просмотра
Использование data-* атрибутов
HTML5 (en-US) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или Node.setUserData() .
Синтаксис HTML
Синтаксис прост — любой атрибут, чьё имя начинается с data- , является data-* атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать data -атрибуты:
article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> . article>
Доступ в JavaScript
Чтение data- атрибутов в JavaScript осуществляется также просто. Для этого можно использовать метод getAttribute() с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект dataset (en-US).
Чтобы получить data -атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase).
var article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars"
Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода article.dataset.columns = 5 приведёт к тому, что новое значение атрибута станет равным «5» .
Доступ в CSS
Заметим, что data -атрибуты являются обычными HTML-атрибутами, к которым можно получить доступ в CSS. Например, чтобы показать родительские данные о статье можно использовать генерируемый контент и CSS функцию attr() :
article::before content: attr(data-parent); >
Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:
article[data-columns="3"] width: 400px; > article[data-columns="4"] width: 600px; >
Увидеть как это работает можно в примере на JSBin.
Data -атрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.
Проблемы
Не храните данные, которые должны быть видимы и доступны в data -атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в data -атрибутах.
Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии не поддерживают dataset . Для поддержки IE 10 и более ранних версий получение доступа к data -атрибутам необходимо осуществлять через getAttribute() . Также, производительность чтения data- атрибутов по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование dataset ещё медленнее, чем чтение данных с getAttribute() .
Тем не менее, для пользовательских метаданных, связанных с элементами, data- атрибуты являются отличным решением.
Смотрите также
- This article is adapted from Using data attributes in JavaScript and CSS on hacks.mozilla.org.
- How to use HTML5 data attributes (Sitepoint)
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.