How to add loading GIF to this JS function?

Posted on 2011-10-04
Last Modified: 2012-05-12

I have this short JS function called 'init' that loads images from an array into a <div> one at a time, hiding them. It then creates a transparent sheet to go over the images for mouse events, and finally displays one of the images. I would like to have a loading gif play until the everything is done and the image is displayed. Would be grateful for any help on how to get this done -- thank you!
function init() {
  title = document.getElementById('title');
  sketchUpObj = document.getElementById('sketchUpObj');
  imageCount = imageFileNameArray.length;

  // load up the imageArray with the sketchUp images
  for (i = 0; i < imageCount; i++) {
    sketchUpImageArray[i] = new Image();
    sketchUpImageArray[i].src = imageFileNameArray[i];
    sketchUpImageArray[i].className = 'sketchUpImage';
//create a transparent sheet over the images so that the mouseevents go it it
  var sheet = document.createElement("DIV");
  document.getElementById('sketchUpObj').appendChild(sheet); = "sheet";
  sheet.onmousemove = handleRotate;
  sheet.onmousedown = handleMouseDown;
  sheet.onmouseup = handleMouseUp;
  sheet.onmouseout = handleMouseUp;
  setOpacity(sheet, 0.0);

  currentPos = imageCount-1

Open in new window

Question by:andreyman3d2k
    LVL 81

    Accepted Solution

    check this test page :

    var imageFileNameArray = ["", "", ""];
    var c = 0;
    function init() {
        title = document.getElementById('title');
        sketchUpObj = document.getElementById('sketchUpObj');
        imageCount = imageFileNameArray.length;
        for (i = 0; i < imageCount; i++) {
            var sketchUpImage = new Image();
            sketchUpImage.src = imageFileNameArray[i];
            sketchUpImage.className = 'sketchUpImage';
            sketchUpImage.onload = function() { 
                if(++c==1) = "block";
                else if(c==imageFileNameArray.length) {
                    document.getElementById("loading").style.display = "none";
                    alert("all pics loaded!");
    window.onload = function() {

    Open in new window

    LVL 6

    Author Closing Comment

    Awesome help, thank you!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now