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

Question

我正在运行一个 Javascript 替换函数，以在我的 jQuery Mobile 网站上用 Retina 质量图像替换标准图像，如果用户使用的是 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，但是随着页面继续加载，它会继续替换 .png 和 img src 中的 @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') 
}