I am new to Drupal, and not that good in Jquery. I just created a Drupal animated banner in Jquery. Each banner image is kinda large about 500kb each jpeg. My problem is, the banner images starts to run even the banner images are not yet fully loaded. Heres the code:

(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;
    $('.masterbg').fadeOut(1000,function() {
         $('div.slogan').text( customtitle[currentBackground] );
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
    setTimeout(changeBackground, 4000);

     setTimeout(changeBackground, 4000);


Can you give me a modification to my code, or theres a function I need to add my code to let the banner images load first before banner slideshow start.

Thank you in advance.

Note: This jquery code is for Drupal.

  • reduce your image size, otherwise you will face performance issue!
    – Bala
    Mar 14, 2014 at 2:51

1 Answer 1


You can visit this post Slideshow Tutorial to create slide show On drupal site in Drupal standard way. Try to use Drupal standards.

  • The current slide I created is ok with me, I don't think I need the VIEWS slideshow provided by Drupal as it eats additional memory, and loads additional scripts. I just need my images to load first before it animates.
    – LayoutPH
    Mar 14, 2014 at 4:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.