Javascript replace( )函数在同一图像上运行多次

Question

如果用户使用的是视网膜显示的移动设备，我正在运行一个Javascript替换功能，将我的jQuery移动站点上的标准图像替换为视网膜质量的图像。例如，在视网膜设备上，logo@2x.png将取代logo.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@2x.png替换logo.png，但随着页面继续加载，它在img src中一次又一次地用@2x.png替换.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移动文档中，关于pageinit的文档很少。所以我要在这里进行推测。看起来pageinit用于在特定的DOM元素完成加载时触发事件，因为它可能在初始页面加载时没有加载(延迟到需要时)。也就是说，向DOM元素添加/更改图像可能会再次触发pageinit。你能给每个更新过的图片加上这样的标签吗？‘嘿，我已经更新到2x了’？像这样的东西

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

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