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

}

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

1 个答案: