1

我在这里让自己陷入了困境。我正在构建一个在每个页面上都加载了背景的网站（即使我将这些压缩到小于 250k，我正在处理超长的加载时间，所有其他图像都加载到每个页面上。我第一次尝试处理这个（特别是在 iPhone 上）是预缓存或预加载这些背景，但任何类型的无线连接的延迟仍然太长，所以我的目标是为不同的设备加载较小版本的背景。我我希望这里有人可以帮助我找到某种解决方案。

目前我正在通过 if (is_page()) elseif (is_page()) 语句加载背景，其中 javascript for ez bg resize 传递每个页面的图像。

<?php
if( is_page('About') ) { $img = 'images/img1.jpg'; }
elseif( is_page('Home') ) { $img = 'images/img2.jpg'; }
elseif( is_page('Page_Name') ) { $img = 'images/img3.jpg'; }
elseif( is_page('Videos') ) { $img = 'images/img4.jpg'; }
else { $img = 'images/img5.jpg'; }
?>
<script type="text/javascript">
$("body").ezBgResize({
    img     : "<?php echo $img; ?>",
    opacity : 1,
    center  : true
});
</script>

我想做的是包含某种类型的变量，上面写着 “如果是此页面，则显示此图像，如果是 iphone / ipad 版本，则显示此图像”

4

1 回答 1

1

您绝对应该在客户端执行此操作，因为您可以通过 Javascript 访问实际屏幕大小，而不是进行用户代理嗅探。尤其是如果您仍然依赖 Javascript 作为背景，请使用 ezBgResize。

您可以检查设备的屏幕分辨率，然后让 ezBgResize 使用高分辨率或低分辨率版本的图像。查看ezBgResize 的随机背景示例和这篇关于 Javascript 媒体查询的帖子以获得灵感。

它可以是这样的：

/* This is an example for just one page, expand to your needs */

// Save the two (or more) different size image file names
var aboutPageBackgrounds = ["image1high.jpg", "image1low.jpg"];

// Check if we are on the about page (assuming an id is set on some element)
if( $("#aboutpage").length ) {
    // Use the high res version by default
    var image = aboutPageBackgrounds[0];

    // Switch to the low res version if the screen is small
    if( screen.width < 600 ) {
        image = aboutPageBackgrounds[1];
    }

    // Call ezBgResize with the resulting image path
    $("body").ezBgResize({
        img     : image,
        opacity : 1,
        center  : true
    });

}
于 2012-07-09T11:00:05.203 回答