Why is this java script not working?

Question

In reference to this post: How to display loading image while actual image is downloading I have the following code, but for some reason I cannot get the #loader_img to hide. I would also like to add a preloader because the large image is really heavy, but I want to keep it simple if possible since I am new to javascript...

<img id="loader_img" src="img/ajax-loader.gif" alt="Loading..." />
<div class="magnifier" style="height: 584px; width: 467px; margin: 20px;">
    <div class="maglens">
       <img id="imgload" src="img/largeimage.jpg" />
    </div>
</div>

JS:

// show loading image
$("#loader_img").show();
$("#imgload").hide();

// main image loaded ?
$("#imgload").on('load', function(){
    // hide/remove the loading image
    $("#loader_img").hide();
});

Any help will be much appreciated! Thank you!

can you copy the complete code??? also put a debug point and check. that way you can check that the flow actually reached till that point or not — yeppe, Aug 07 '15 at 07:46
*"It is probably a silly syntax error"* Well, you don't have to guess at that -- what do you see in your web console? — T.J. Crowder, Aug 07 '15 at 07:46
has #imgload already been loaded? then load event handler won't fire. This might be a problem as well: http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached — Blauharley, Aug 07 '15 at 07:47
If this is the complete code the `});` will close *nothing*. The line missing is probably `$(function() {`. — Fabio Poloni, Aug 07 '15 at 07:48
Well are you sure that the `load` event fire if the element is hidden ? — Hacketo, Aug 07 '15 at 07:48
@FabioPoloni what about the load listener ? need to close the function .. — Hacketo, Aug 07 '15 at 07:48
@FabioPoloni: No, it closes the `.on` call three lines above it. (Indentation would have been good...) — T.J. Crowder, Aug 07 '15 at 07:51

T.J. Crowder · Answer 1 · 2015-08-07T08:27:04.847

1

The image's load event is almost certainly firing before you hook the event. Since it's already fired when you hook the event, you never see it occur.

Also, you start out hiding the image (#imgload), but you never then show it.

To ensure that you get the event, you have to hook load before setting the image's src.

Alternately, you can use the image's complete property to know if it's already been loaded:

// show loading image
$("#loader_img").show();
$("#imgload").hide();

// main image loaded ?
var img = $("#imgload");
if (img[0].complete) {
    imageDone();
} else {
    img.on('load', imageDone);
}

function imageDone() {
    // hide/remove the loading image
    $("#loader_img").hide();
    // And show the image!
    img.show();
}

You also have to ensure that the code above runs after the elements have been created. The best way to do that is to put your script tag containing the code after the elements it refers to in the HTML (usually putting it just before the closing </body> tag works well). As a second-best solution, you can use jQuery's ready function. Either way, you'll still need to handle the possibility the load event has already fired.

Here's an example:

<div id="loader_img">Loading</div>
<div class="content">
  <img id="imgload" src="http://i.stack.imgur.com/rTQCa.jpg?s=512&g=1" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  (function() { // Avoid creating globals
    // show loading image
    $("#loader_img").show();
    $("#imgload").hide();

    // main image loaded ?
    var img = $("#imgload");
    if (img[0].complete) {
      console.log("Complete");
      imageDone();
    } else {
      console.log("Wait for load");
      img.on('load', imageDone);
    }

    function imageDone() {
      console.log("Loaded");
      // hide/remove the loading image
      $("#loader_img").fadeOut();
      // And show the image!
      img.show();
    }
  })();
</script>

edited Aug 07 '15 at 08:27

answered Aug 07 '15 at 07:48

T.J. Crowder

879,024
165
1,615
1,639

Thank you @J.T Crowder, I am trying right now using your example. The only problem I seem to have is that the loader does not seem to "wait" for the image to be loaded before it goes. I have a "magnifier" class and therefore I want the magnified and smaller version to be loaded before the loader goes. I have updated the code so you can see what I mean :) – Sara Aug 07 '15 at 08:17
@Sara: It doesn't seem to disappear too early for me. I've switched to a larger picture, and also since it takes a moment from the point the image loads to the point the browser actually displays it, I've updated to fade out the loading image rather than immediately remove it. I'm not seeing it disappear before the image is there. – T.J. Crowder Aug 07 '15 at 08:27
Thank you @T.J Crowder, it seems to be working now! since I am testing it locally may be that's part of the issue. Thanks so much for your help!! :) – Sara Aug 07 '15 at 19:05
does it matter if I apply the exact same code to a class or # instead of the img #? I tried changing the #imgload to .magnifier in the code just because I don't want the magnified image to appear before the image thumbnail, i.e. I want the #loader_img to stay until the thumbnail has loaded but even though I do not change the code it does not work... – Sara Aug 07 '15 at 20:41
@Sara: Nope, shouldn't matter. :-) – T.J. Crowder Aug 08 '15 at 06:34
Thank you very much @T.J. Crowder, your solution did work great when I tested it on the server!! :) (Sorry for the late comment, I had not been able to work on the project for a few days) – Sara Aug 15 '15 at 23:52
@Sara: Great, glad that helped. – T.J. Crowder Aug 16 '15 at 06:59

score 0 · Answer 2 · answered Aug 07 '15 at 08:07

Hi you may use this method. jQuery.ready()I have tried on my computer and it's okay this way. BTW, you forgot to let the "imgload" show again.

// show loading image
$("#loader_img").show();
$("#imgload").hide();

// main image loaded ?
$("#imgload").ready(function(){
    // hide/remove the loading image
    $("#loader_img").hide();
    $("#imgload").show();  // show the loaded img again
});

michaelbn · Answer 3 · 2015-08-10T11:29:50.547

-4

I think that the script is executed before the DOM is loaded. Take your script and put it between:

$(function () {
   //Your code here
});

This will insure that the code will run after the DOM is loaded.

edited Aug 10 '15 at 11:29

answered Aug 07 '15 at 07:48

michaelbn

6,313
1
29
42

3

Missing closing bracket. – Fabio Poloni Aug 07 '15 at 07:54

Why is this java script not working?

3 Answers3