Используйте jQuery для быстрой замены изображений без использования браузера

Question

Я изучал адаптивные методы замены изображений, и у всех них есть свои плюсы и минусы. Хотя одна вещь, которая кажется распространенной, заключается в том, что все они используют анализ браузера, чтобы выборочно установить соответствующий размер изображения.

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

Например, если у нас есть эта разметка для избранного изображения для данной страницы "

<figure class="figureFeatured">
    <img src="myimage-300x300.jpg" />
</figure>

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

@media only screen and (max-device-width:480px)
{
    figure.figureFeatured img{content:url(myimage-50x50.png)}";
}

Проблема, и я надеюсь, что jQuery может помочь, это когда вы заранее не знаете имя изображения. Вам нужно использовать dom, чтобы найти это, а затем, возможно, использовать регулярное выражение, чтобы указать заменяющее изображение.

Например, изображение в моем примере - "myimage-300x300.jpg", но это может быть любое имя файла с расширением -WidthxHeight.jpg.

Answer 1

Не могли бы вы просто сделать следующее?:

HTML

<div class="image"></div>

CSS

.image {
     background: url("image1") no-repeat scroll 1px 1px #FFFFFF;
}

@media only screen and (max-device-width:480px)
{
.image {
     background: url("image2") no-repeat scroll 1px 1px #FFFFFF;
}
}