jQuery Mobile - CSS Retina图像替换

我有一个使用jQuery Mobile运行的手机网站。我想为非视网膜（没有高像素密度的设备）设备制作标准图像，但希望用高像素密度设备上的视网膜（高像素密度）图像代替原始图像大小的2倍。我发现这篇文章在这里：http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/jQuery Mobile - CSS Retina图像替换

我对jQuery的执行查找图像与class="replace-2x"，并在与@2x添加到文件名相同的路径替换一个标准的图像。因此logo.png将在Retina设备上替换为[email protected]。我的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(); 
});

页面加载但是，此功能不会被调用或工作（一个或其他），所以我不知道我是否需要像$(".page").live('pageinit', function() {代替或者是什么使该函数在页面加载时触发或“工作”？帮帮我？？ :)

来源

2012-04-05 adamdehaven

尝试使用inbuild'jQuery（“。replace-2x”）。attr（“src”，newImageName）'，以减少错误的来源。 – devsnd 2012-04-05 13:24:49

你能解释一下吗？我不确定你的意思，或者把它放在哪里？ – adamdehaven 2012-04-05 13:28:31

基本上，@twall建议的是操纵JQuery对象而不是DOM元素。我将在下面添加我的答案，因为评论部分不够大。 – saluce 2012-04-05 13:38:11

在JQuery手机中，您需要使用pageinit，因为ready函数只调用一次;每个其他页面都通过Ajax加载，不会触发就绪事件。有关更多信息，请参阅JQuery Mobile Events。

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

来源

2012-04-05 13:23:34 saluce

那么我将如何实现，在我的代码？你能提供代码吗？ – adamdehaven 2012-04-05 13:28:45

你基本上提供了代码。在这里，我只是绑定到ui页面类（它代表JQueryMobile中的页面）。 – saluce 2012-04-05 13:34:36

如果我想替换'.png'和'.jpg'，我会添加什么代码？ – adamdehaven 2012-04-05 13:41:58

jQuery Mobile - CSS Retina图像替换

回答

相关问题