jQuery Mobile — Замена изображения CSS Retina

У меня есть мобильный сайт с jQuery Mobile. Я хочу иметь стандартные изображения для устройств без сетчатки (устройства без высокой плотности пикселей), но хочу, чтобы эти изображения были заменены изображениями сетчатки (с высокой плотностью пикселей), которые в 2 раза больше оригинала при просмотре на устройстве с высокой плотностью пикселей. Я нашел эту статью здесь: http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/

Мой jQuery для реализации ищет изображения с class="replace-2x" и заменяет стандартное изображение одним по тому же пути с добавлением @2x к имени файла. Таким образом, logo.png будет заменено на [email protected] на устройстве Retina. Мой jQuery выглядит так:

function highdpi_init() {
    if(jQuery('.replace-2x').css('font-size') == "1px") {
        var els = jQuery(".replace-2x").get();
        for(var i = 0; i < els.length; i++) {
            var src = els[i].src
            src = src.replace(".png", "@2x.png");
            els[i].src = src;
        }
    }
}
jQuery(document).ready(function() {
    highdpi_init();
});

Однако, когда страница загружается, эта функция не вызывается или не работает (одна или другая), поэтому я не уверен, нужно ли мне вместо этого что-то вроде $(".page").live('pageinit', function() { или что, чтобы функция срабатывала или «работала» при загрузке страницы? Помощь?? :)


media-queries jquery-mobile retina-display image-replacement
person adamdehaven    schedule 05.04.2012    source источник
comment
Попробуйте использовать встроенную сборку jQuery(".replace-2x").attr("src", newImageName), чтобы уменьшить количество источников ошибок.   -  person devsnd    schedule 05.04.2012
comment
Вы можете объяснить? Я не уверен, что вы имеете в виду или куда поместить это?   -  person adamdehaven    schedule 05.04.2012
comment
По сути, @twall предлагает манипулировать объектом JQuery, а не элементом DOM. Я добавлю к моему ответу ниже, так как раздел комментариев недостаточно велик.   -  person saluce    schedule 05.04.2012
comment
Если вы разместите SRC для IMG по умолчанию, ваши пользователи Retina будут загружать обе версии изображения (много байтов). Существует трюк с помощью события загрузки изображения, дополнительная информация на stackoverflow.com/a/19443428/304371   -  person Artru    schedule 19.10.2013

Ответы (1)


arrow_upward
3
arrow_downward

В мобильном JQuery вам нужно использовать pageinit, потому что функция ready вызывается только один раз; каждая вторая страница загружается через Ajax, что не вызывает событие готовности. Дополнительные сведения см. в разделе JQuery Mobile Events.

function highdpi_init() {
    $(".replace-2x").each(function () {
        if ($(this).css("font-size") == "1px") {           
            var src = $(this).attr("src");
            $(this).attr("src", src.replace(/(@2x)*.png/i, "@2x.png").replace(/(@2x)*.jpg/i, "@2x.jpg"));
            $(this).removeClass('replace-2x')
        }
});

$(".ui-page").live('pageinit',function(event){
    highdpi_init();
});
person saluce    schedule 05.04.2012
comment
Итак, как мне реализовать это в моем коде? Не могли бы вы предоставить код? - person adamdehaven; 05.04.2012
comment
Вы в основном предоставили код. Здесь я просто привязываюсь к классу ui-page (который представляет страницу в JQueryMobile). - person saluce; 05.04.2012
comment
Если я хочу заменить .png И .jpg, какой код мне добавить? - person adamdehaven; 05.04.2012
comment
изменить строку src = src.replace(".png", "@2x.png").replace(".jpg", "@2x.jpg") - person saluce; 05.04.2012
comment
Как/где вы это реализовали? Для меня это не отображение изображения на моем iPhone 4S. - person adamdehaven; 05.04.2012
comment
Теперь я столкнулся с проблемой, когда функция замены запускается более одного раза. Так, например, он заменяет logo.png на [email protected], но затем, когда страница продолжает загружаться, он ПРОДОЛЖАЕТ заменять .png на @2x.png снова и снова, так что тег изображения в конечном итоге выглядит следующим образом: <img src="mobile/images/logo@2x@2x@2x@2x@2x@2x@2x@2x@2x@[email protected]" class="replace-2x" alt="logo" width="200"> - person adamdehaven; 05.04.2012
comment
давайте продолжим это обсуждение в чате - person saluce; 05.04.2012