CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Davide Villa
Davide Villa

Reputation: 59

Load images before showing a div

I have never asked anything on this forum before so I'll try to be as clear as possible. I am trying to show a loading screen while the contents of a div is loading in my website.

I tried to use jQuery .load() function but it seems not to work. It works when i use the .ready() function but i want to load all the images before to show the div.

So the div is hidden (style="display:none;")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading"> // loading screen </div>
<div id="divtoshow" style="display:none;"> //images and text </div>

<script>
$("#divtoshow").load(function(){
  $("#loading").fadeOut(200);
  $("#divtoshow").fadeIn(200);
});
//if i replace load with ready it works
</script>

Upvotes: 5

Views: 7272

Answers (5)

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

The load() method was deprecated in jQuery version 1.8 and removed in version 3.0. you can use window on.load function OR you can also follow the DaniP answer. Here is an example with preloader.
One more problem you are trying to load the #divtoshow which is already display none. So you need to load something that inside on that div 

$(window).on('load', function() {
  $("#loading").fadeOut();
    $("#divtoshow").fadeIn(300);
});
#divtoshow {
display: none;
  text-align: center;
}
 #loading{
   position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}
.img-responsive{
width:100%;
height:auto;
display:block;
margin:0 auto;
}

  
    <div id="loading"></div>
    <div  id="divtoshow" class="animate-bottom">
 <img src="http://orig10.deviantart.net/f6bf/f/2007/054/1/9/website_banner_landscape_by_kandiart.jpg" class="img-responsive" alt="banner "/>
    <h2> loaded Title!</h2>
    <p>Some text and Image in my newly loaded page..</p>
   
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Razia sultana
Razia sultana

Reputation: 2211

CSS

#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

HTML

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

JAVASCRIPT

<script language="javascript" type="text/javascript">
     $(window).load(function() {
     $('#loading').hide();
  });
</script>

Upvotes: 0

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

You want to do stuff specifically when all the images on the page have loaded.Try this custom jQuery event...

/**
 * Exposes an event called "imagesLoaded" which is triggered 
 * when all images on the page have fully loaded.
 */
(function($) {
    var loadImages = new Promise(function(done) {
        var loading = $("img").length;
        $("img").each(function() {
            $("<img/>")
                .on('load', function() {
                    loading--;
                    if (!loading) done();
                })
                .on('error', function() {
                    loading--;
                    if (!loading) done();
                })
                .attr("src", $(this).attr("src"))
        });
    });
    loadImages.then(function() {
        $(document).trigger({
            type: "imagesLoaded"
        });
    });
})(jQuery);

It works by copying each image (in the event they are already loaded, this is necessary to catch the load event) and listening for the load on the copy. I got the idea from here.

Here is a fiddle.

Upvotes: 2

Vanquished Wombat
Vanquished Wombat

Reputation: 9525

If you want the page contents to load before transitioning to display the main page div then you want to us the fundamental document.ready pattern:

<div id="loading"> // loading screen </div>
<div id="divtoshow" style="display:none;"> //images and text
<img src='...a path to a large file....'/>
</div>

and then

<script>
$(document).ready(function() {
  $("#loading").fadeOut(200);
  $("#divtoshow").fadeIn(200);
});
</script>

In general, if you are doing any element (DOM) manipulation using JQuery and you do NOT havethe document.ready() pattern in place then you should ask yourself if you should maybe add it in. Particularly if you develop with local assets because when you shift to production and network latency has an impact you may find timing issues cause odd bugs in code that worked perfectly when all assets were local.

Upvotes: 0

DaniP
DaniP

Reputation: 38252

If you want to use the .load() method you need to bind it to the img element not to the container:

$("#divtoshow img").on('load', function(){
  $("#loading").fadeOut(200, function(){
    $("#divtoshow").fadeIn(200)
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">Loading</div>
<div id="divtoshow" style="display:none;"><img src="http://lorempixel.com/350/150"><h1>My Text</h1></div>

Upvotes: 1

Related Questions