Mobile First Design, загрузка изображений и выбор JQuery DOM

Question

Я пытаюсь использовать мобильный подход к дизайну сайта. В рамках этого я использую медиа-запрос для определения ширины экрана более 768 пикселей

@media only screen and (min-width: 768px)

Это запускает изображение для загрузки через CSS

h1:before{content: url(../static/logo.png)" ";}

Теперь, когда загружается это изображение, я бы тоже хотел сделать его гиперссылкой. Поскольку я уже использую jquery в другом месте, я думаю, что проще всего было бы выбрать изображение в DOM и добавить элемент гиперссылки к объекту. Тем не менее, мне кажется, что изображение не появляется в DOM, потому что я использую CSS для загрузки изображения (я не уверен, имеет ли значение тот факт, что это псевдоэлемент).

Какова эффективная стратегия загрузки объектов (изображений) и применения к ним разметки в стратегии «сначала с мобильного»? Спасибо!

Answer 1

Просто используйте jQuery, чтобы вставить изображение и ссылку в DOM.

if ($(window).width() > 768) {
    $('h1').before('<a href="#"><img src="images/logo.jpg" /></a>');
}

Answer 2

Вы не можете выбирать или манипулировать псевдо элементами, добавленными с :before или :after.Они просто не появляются в DOM.Начиная с Генерируемый контент spec :

Генерируемый контент не изменяет дерево документа.В частности, он не возвращается обратно в процессор языка документа (например, для повторного анализа).

См. этот пример на jsFiddle .

---

Использование jQuery для добавления изображения и ссылки - как в ответе Расти Джинса - является хорошим способом.

Если вас беспокоит изменение размера, наиболеечто CSS-подход купит вас, так это то, что изображение будет отображаться / скрываться, даже если JS был отключен.Чтобы «связать» его, вам необходимо следить за событием resize, независимо от того,(Если по какой-то причине изменение размера действительно является большой проблемой.)

Если бы это был я, я бы использовал реальный HTML - изображение с предварительно связанными ссылками - вместо псевдоэлементов.Используйте CSS, управляемый медиа-запросом, чтобы показать или полностью скрыть эти узлы (display:none и т. Д.).

Другой подход - добавить изображение с помощью CSS, чтобы браузеры с отключенной JS работали после, НО , затем используйте JS, чтобы удалить этот CSS, псевдоэлемент и добавить вместо него реальный элемент со ссылкой.То есть подход «прогрессивного улучшения».

---

:before и :after контент предназначен для презентационных целей, а не структурных, функциональные элементы.