1

我有一个使用 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将logo@2x.png在 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() {，或者当页面加载时函数触发或“工作”？帮助？？:)

4

1 回答 1

3

在 JQuery mobile 中，您需要使用pageinit，因为该ready函数只调用一次；其他所有页面都通过 Ajax 加载，不会触发 ready 事件。有关更多信息，请参阅JQuery 移动事件。

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();
});
于 2012-04-05T13:23:34.123 回答