Wordpress - 在不同页面上使用多个可调整大小的背景

Question

我在这里陷入了困境。 我正在构建一个在每个页面上都加载了背景的网站（即使我将这些压缩到小于 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版本，显示这个图像"

Answer 1

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

您可以检查设备的屏幕分辨率，然后让 ezBgResize 使用高分辨率或低分辨率版本的图像。查看random background example for ezBgResize 和this post on Javascript media queries 以获得灵感。

可能是这样的：

/* 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
    });

}