Question

我检查了一些其他论坛，但无法让它工作。在网站上有三个图像具有悬停效果。在第一页加载时，悬停效果需要一秒钟才能加载背景图像。

这就是我的内心

<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>

然后我在我的身体标签中有这个：

<body  <?php body_class(); ?> onLoad="MM_preloadImages('http://agconcretepro.com/wp-content/uploads/2016/07/designreplace2.png','http://agconcretepro.com/wp-content/uploads/2016/07/ConcreteREPLACE.png','http://agconcretepro.com/wp-content/uploads/2016/07/no_title_paver.png')">

对于我需要预加载的三张图片不起作用。我也从谷歌搜索中复制并粘贴了这个，并尝试将它放在我的header.php中的各个地方都无济于事。

       <script type="text/javascript">

            if (document.images) {
                img1 = new Image();
                img2 = new Image();
                img3 = new Image();

                img1.src = "http://agconcretepro.com/wp-content/uploads/2016/07/designreplace2.png";
                img2.src = "http://agconcretepro.com/wp-content/uploads/2016/07/ConcreteREPLACE.png";
                img3.src = "http://agconcretepro.com/wp-content/uploads/2016/07/no_title_paver.png";
            }

    </script>

这里的任何帮助都会很棒！谢谢！

Answer 1

尝试这样的事情：

<body imageURL1="path/to/your/image1" imageURL2="path/to/your/image2" imageURL3="path/to/your/image3" imageURL4="path/to/your/image4">
<div id="home-image-container"></div>

然后使用jQuery，你可以这样做：

function home_load_background(){
//Load first image and start timer

var $body = $('body');

var $fader = $('#home-image-container');

var $temp = $('<div />');

var images = [];

images.push(
    $body.attr('imageurl1'),
    $body.attr('imageurl2'),
    $body.attr('imageurl3'),
    $body.attr('imageurl4')
);

for (var i = 0; i < images.length; i++) {
    var $img = $('<img />').attr('src', images[i]);

    $temp.append($img);
};

    $fader
        .append($temp.find('img'))
        .find('img').first().on('load', function(){
           $fader.fsslider({
                width: $fader.width(),
                height: $fader.height(),
                spw: 5,
                sph: 4,
                delay: 8000,
                sDelay: 100,
                effect: 'rand',
                texture: 'strip1',
                navigation: false,
                animDuration: 1200,

            });
        });
}

在准备好文件时，您可以调用您的函数：

$(document).ready(function(){
    home_load_background();
});

您是否可以看到我使用FSSlider来显示其他图像。但是，您可以使用任何您想要的。

Answer 2

我自己回答了这个问题而没有任何可行的JS。

使用HTML，紧跟身体标记：

<div id="preload">
    <img src="path/to/image>
    <img src="path/to/image>
    <img src="path/to/image>
</div>

和CSS：

div#preload{display: none}

对于任何人来说，如果他们遇到这个问题！并且

使用JavaScript预加载图片

2 个答案: