Jquery mobile jquerymobile-CSS视网膜图像替换

我有一个运行jQuery mobile的移动站点。我想为非视网膜（没有高像素密度的设备）设备提供标准图像，但希望用视网膜（高像素密度）图像替换这些图像，在高像素密度设备上观看时，这些图像的大小是原始图像的2倍。我在这里找到了这篇文章：

我的jQuery用于实现查找带有

class=“replace-2x”

的图像，并使用添加到文件名中的

@2x

替换位于同一路径的标准图像。因此

logo.png

将被

logo@2x.png

在视网膜设备上。我的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();
});

函数highdpi_init（）{
if（jQuery（'.replace-2x'）.css（'font-size'）==“1px”）{
var els=jQuery（“.replace-2x”）.get（）；
对于（变量i=0；i

---

然而，当页面加载时，该函数没有被调用或工作（一个或另一个），因此我不确定是否需要类似

$（“.page”）.live（'pageinit'，function（）{

，或者是什么使函数在页面加载时启动或“工作”？帮助？？）

在JQuery mobile中，您需要使用

pageinit

，因为

ready

函数只调用一次；每隔一个页面通过Ajax加载，这不会触发ready事件。有关更多信息，请参阅

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();
});

---

尝试使用inbuild

jQuery（“.replace-2x”）.attr（“src”，newImageName）

，以减少错误的来源。你能解释一下吗？我不知道你的意思是什么，也不知道该放在哪里？基本上，@twall建议的是操作JQuery对象而不是DOM元素。我将在下面的回答中添加注释，因为注释部分不够大。如果默认情况下为IMG放置SRC，你的视网膜用户将下载这两个内容图像的版本（很多字节）。有一个技巧是通过图像加载事件，更多信息，那么我如何在代码中实现它？你能提供代码吗？你基本上提供了代码。这里，我只是绑定到ui页面类（它代表JQueryMobile中的页面）。如果我想替换

.png

和

.jpg

，我会添加什么代码？更改行

src=src.replace（“.png”、“@2x.png”）。替换（“.jpg”、“@2x.jpg”）

你是如何/在哪里实现的？对我来说，它没有在我的iPhone 4S上显示图像。