Jquery让我的横幅图像在动画之前加载

时间:2014-03-14 04:36:27

标签: javascript jquery

我在jquery中创建了一个横幅图片幻灯片。其实我只是在某个地方找到了代码,我记不起来了。即使横幅图像尚未完全加载,它也会开始制作动画,这使得横幅幻灯片动画可以动画显示没有图像的图像描述。

任何?请帮助我修改代码并让它在运行幻灯片动画之前首先加载背景图像来运行。

谢谢。

(function ($) {
  // Original JavaScript code.
var currentBackground = 0;
var backgrounds = [];
backgrounds[0] = 'http://www.site.com/sites/all/themes/layoutph/images/bg01.jpg';
backgrounds[1] = 'http://www.site.com/sites/all/themes/layoutph/images/bg02.jpg';
backgrounds[2] = 'http://www.site.com/sites/all/themes/layoutph/images/bg03.jpg';
backgrounds[3] = 'http://www.site.com/sites/all/themes/layoutph/images/bg04.jpg';

var customtitle = [];
customtitle[0] = "Welcome to Site";
customtitle[1] = "Site joined force with Site Foundation";
customtitle[2] = "Site Foundation school campaigns for 2014";
customtitle[3] = "New York visited by Site Foundation";


function changeBackground() {
    if(currentBackground > 3 ) currentBackground = 0;
    currentBackground++;
    $('.masterbg').fadeOut(1000,function() {
         $('div.slogan').text( customtitle[currentBackground] );
        $('.masterbg').css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
        });
        $('.masterbg').fadeIn(1000);
    });
    setTimeout(changeBackground, 4000);

}
     setTimeout(changeBackground, 4000);

})(jQuery);

1 个答案:

答案 0 :(得分:0)

    var UserimageObj = new Image();
    UserimageObj.src = "someimg.jpg";

    //load the user image before doing anything
    UserimageObj.onload = function () {

      //do your stuff here
    };

这是你在找什么?