jQuery移动版- CSS视网膜图像替换
提问于 2012-04-05 13:19:29
我有一个与jQuery移动运行的移动网站。我想有非视网膜(设备没有高像素密度)设备的标准图像，但希望这些图像被视网膜(高像素密度)图像取代，当在高像素密度设备上查看时，这些图像的大小是原始图像的2倍。我在这里找到了这篇文章：http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/
用于实现的我的jQuery使用class="replace-2x"查找图像，并将标准图像替换为文件名中添加了@2x的相同路径的图像。因此，在视网膜设备上，logo.png将被logo@2x.png取代。我的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() {之类的东西来代替，或者当页面加载时，函数会触发或“工作”吗？帮助？？:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-04-05 13:23:34
在JQuery mobile中，您需要使用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();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10029394
复制相关文章
【Java】 NullPointerException、ArrayIndexOutOfBoundsException、ClassCastException、ArrayIndexOutOfBoundsE
腾讯云开发者
