Question

如果用户在具有Retina显示屏的移动设备上，我正在运行Javascript替换功能，用我的jQuery Mobile网站上的class="replace-2x"替换带有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();
});

我现在遇到的问题是，replace函数不止一次运行。例如，当页面加载时，它会将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元素？请记住，我将在同一页面上有多个图像，因此该功能需要应用于所有图像，但每个图像只需一次。

Answer 1

问题肯定是您的'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') 
}

Answer 2

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

Answer 3

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

之类的东西

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

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

Javascript replace（）函数在同一图像上运行多次

3 个答案: