dougou8639 2016-07-26 00:26
浏览 49

使用JavaScript预加载图像

I have checked a few other forums and can't get it to work. On the website there are three images with a hover effect. On the first page load the hover effect takes a second to load the background image.

Here is what I have inbetween my 

<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>

then I have this in my body tag:

<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')">

Doesn't work for the three images I need preloaded. I also copy and pasted this from google searching, and tried putting it in various places in my header.php to no avail.

       <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>

Any help here would be awesome! Thank you!

</div>
  • 写回答

2条回答 默认 最新

  • dsw7547 2016-07-26 00:53
    关注

    Try something like this:

    <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>

    Then using jQuery you can do:

    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,

            });
        });
}

    And on document ready you can call your function:

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

    Has you can see i used FSSlider to show the other images. However, you can use whatever you want.

    评论

报告相同问题？

悬赏问题

  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）