Question

我正在使用jquery来更改div的背景图像。

场景：5个链接，每个链接都有一个由jquery更改的ID，当鼠标超过链接时，DIV的背景图像，并在外出时再次放入原始背景图像。

所以... 当页面加载...

DIV background image = 1.png

当鼠标悬停在LINK 1上时，DIV背景图像= 2.png

当鼠标离开时，DIV背景图像返回1.png

（与其他链接相同...... 2,3,4,5）

因此...

对于正常状态，背景图像为：1.png当更改时... 2.png，3.png等...当鼠标出局时，再次1.png。

它运作良好，但是...... 在图像之间，主要是当我刷新浏览器或更改网页的位置（光标）时，会出现“空白背景”（无图像）。

我认为这可以通过预装脚本来解决，预加载我将使用的图像（例如：1.png，2.png，3.png ......等）

但......还是一样。任何人都知道如何解决这个问题？

感谢您的时间。

我只是将JQUERY用于更改和预加载，因为其余部分并不重要。（至少，我想是这样）

JQUERY CODE

<script type="text/javascript">
$(document).ready(function() {
    $("#link1").hover(
    function() {
        //mouse over
        $('.divi').css('background-image', 'url("2.png")');
    }, function() {
        //mouse out
        $('.divi').css('background-image', 'url("1.png")');
    });
});


$(document).ready(function() {
    $("#link2").hover(
    function() {
        //mouse over
        $('.divi').css('background-image', 'url("3.png")');
    }, function() {
        //mouse out
        $('.divi').css('background-image', 'url("1.png")');
    });
});

//对于link3来说...... ......

<script type="text/javascript">
$.preloadImages = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preloadImages("1.png","2.png","3.png");

//其他图像也一样

在jquery改变div的背景图像之间没有图像

0 个答案: