1

class="replace-2x"如果用户在具有 Retina 显示屏的移动设备上，我正在运行 Javascript 替换功能，以将我的 jQuery Mobile 网站上的标准图像替换为 Retina 质量的图像。例如，在 Retina 设备上，logo.png将替换为logo@2x.png. JS函数在这里：

function highdpi_init() {
    $(".replace-2x").each(function () {
        var src = $(this).attr("src");
        $(this).attr("src", src.replace(".png", "@2x.png").replace(".jpg", "@2x.jpg"));

    });
}

$(".page").live('pageinit',function(event){
    highdpi_init();
});

我现在遇到了替换功能不止一次运行的问题。因此，例如，它在页面加载时替换logo.png为logo@2x.png，但随着页面继续加载，它会一遍又一遍地在 img src 中替换.png为@2x.png，因此图像标签最终看起来像这样：

<img src="mobile/images/logo@2x@2x@2x@2x@2x@2x@2x@2x@2x@2x@2x.png" class="replace-2x" alt="logo" width="200">

如何防止它多次替换单个 img 元素？请记住，我将在同一页面上有多个图像，因此该功能需要应用于所有图像，但每个图像只有一次。

4

3 回答 3

3

问题肯定是您的“pageinit”事件被多次调用。您可以遵循 MДΓΓ БДLL 的想法（如果动态添加图像，这将不起作用），或者您可以使您的处理程序更智能，这样它就不会替换已经被替换的 src

function highdpi_init() {
    $(".replace-2x").each(function () {
        var $this = $(this);
        var src = $this.attr("src");
        $this.attr("src", src.replace(".png", "@2x.png").replace(".jpg", "@2x.jpg"));
        // Remove the class so it doesn't replace it again
        $this.removeClass('replace-2x')

    });
}

你不需要 JS，你可以只用 CSS 来做。

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="/css/highdpi.css"/>

你可以让你的图像看起来像

<img src="transparent.gif" class="logo-a" alt="logo" width="200" />

你highdpi.css可以做

img.logo-a {
   background-image: url('file@2x.png') 
}

而在lowdpi.css

img.logo-a {
   background-image: url('file.png') 
}
于 2012-04-05T15:59:55.553 回答
0

使用 .one() 应该可以工作，因为它只是一个绑定，如果您使用 Jquery Mobile，建议的方式就可以了。除非您从服务器传回 html。在这种情况下，最好添加一个额外的条件以确保在替换之前 src 还没有 @2x.png。

于 2012-04-05T16:03:07.573 回答
0

令人失望的是，官方 jQuery Mobile 文档中关于 pageinit 的文档很少。所以我要在这里推测一下。它看起来像是pageinit用于在特定 DOM 元素完成加载时触发事件，因为它可能尚未在初始页面加载时加载（延迟到需要时）。话虽如此，可能是向有问题的 DOM 元素添加/更改图像会再次触发 pageinit。你能用“嘿，我已经更新到 2x”的内容标记每个更新的图像吗？诸如此类的东西

$.data(targetimg, 'retinafied', true);

然后在替换 src 之前检查该值？

于 2012-04-05T16:06:58.187 回答