Question

我有一个简单的JS函数为每个“页面”更改我的网站的背景图像 - 实际上没有单独的页面，只是JS改变了内容区域和背景。这是我的代码：



    var selector = 'home';

    function changeBG()
    {
        if( selector == 'portfolio' )
        {
            document.bg_img.src = 'imgs/sandwiches/BLT_smlbw.jpg';
        }

        else if( selector == 'contact' )
        {
            document.bg_img.src = 'imgs/sandwiches/eggSammerSml.jpg';
        }

        else
        {
            document.bg_img.src = 'imgs/plums4.jpg';
        }


    }

和HTML



<!-- bg -->
<img class="bg" id="bg_img" src="" alt="background_image" name="background_image" />
<!-- /bg -->

<!-- content -->
<div id="wrapper">

<!-- left nav -->
    <div id="left" class="content">
        <img src="imgs/sandwich_logo.png" width="384" height="73"     alt="sandwich_enthusiast" name="sandwich_enthusiast" />
        <ul class="nav">
            <li><a href="#about" id="about">about</a></li>
                <li><a href="#" id="portfolio" onclick="selector = 'portfolio'; changeBG();">portfolio</a></li>
        <li><a href="#contact" id="contact" onclick="selector = 'contact'; changeBG();">contact</a></li>
        <li><a href="http://glosee.ca/blog" id="blog">the sammers</a></li>
    </ul>
</div>

在Chrome，Safari和IE8中，图片加载完美，但在FF中，图像在第一次点击时作为背景图片加载到包装div中，然后在第二次点击时加载到整个背景中。

关于如何解决这个问题的任何想法？

由于

Answer 1

脚本很好。这可能与分配给 bg 图片的 bg_img 类有关。可能 bg 有一些不受支持的属性，不适用于FF。

修改

要更改页面的背景，为什么不将document.bg_img.src替换为document.body.background。

Answer 2

我建议使用像jQuery这样的Javascript库来帮助避免跨浏览器问题。

如果你想在没有一个的情况下继续，你可以尝试使用标准的DOM操作方法：

document.getElementById('bg_img').setAttribute('src', 'imgs/sandwiches/BLT_smlbw.jpg')

Answer 3

只需使用以下内容：

function changeBG()
{
    var img = docuemnt.getElementById ("bg_img");
    if( selector == 'portfolio' )
    {
            img.src = 'imgs/sandwiches/BLT_smlbw.jpg';
    }

    else if( selector == 'contact' )
    {
            img.src = 'imgs/sandwiches/eggSammerSml.jpg';
    }
    else
    {
            img.src = 'imgs/plums4.jpg';
    }


}

JS和Firefox的问题 - 图像替换

3 个答案: