2014-03-14 29 views
0

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

創建[fiddle](http://fiddle.jshell.net/)演示 – rynhe

回答

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

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

     //do your stuff here 
    }; 

難道這就是你要找的人?