jQuery on load event do not trigger script

Question

First I was looking at the onLoad event, but then when I read about it, I discovered that I was or going to be deprecated, so I search and found this info to use the on event to check if an image is loaded:load() method deprecated?

But the simple animation I will trigger, will not work. The element is not visible. It works if I reload the browser. The animation worked perfect until I added the load event. What could be wrong and how can I improve the code to work better?

    $("#intro-img").on("load", function() {

    $(".intro-content").animate({
    left: '20px',
    opacity: '1.0'
    });

});

EDIT: The script is running now after I used window instead of the id. Like this $(window).on("load", function() {.... Now the script should run when all content on the page has been loaded? But I guess there is never a guarantee that it will work 100% with images!?

Mustafa ASAN · Accepted Answer · 2015-07-30 10:34:46Z

2

$('#book').on("load",function(){
  //animate
});

Problem with this approach is when image is loaded from cache load event has a possibility that it is never triggered.When image is first downloaded jquery can have a chance to attach the event before image is loaded and work expected.But if image is loaded so quickly via cache then jquery may not have.

$('#book').on("load",function(){
  $(".intro-content").animate({
    left: '20px',
    opacity: '0.5',
    height:"300px"
    });
}).each(function(){
  if(this.complete) {
    $(this).trigger('load');
  }
});

This code attaches event and also checks whether image is already loaded and triggers the load event.

edited Jul 30, 2015 at 10:34

answered Jul 30, 2015 at 9:26

Mustafa ASAN

3,8552 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:52:23Z

0

With $(window).load you must to wait to load all resources in web to execute script. You can make an image load event cross-browser. See this:

JavaScript/jQuery event listener on image load for all browsers

Instead of your code

 $('image').on('load')

You can use

 $('image').load()

Or attaching events with eventListener.

Good luck

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Jul 30, 2015 at 8:51

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

2 Comments

3D-kreativ Over a year ago

Thanks, but the .load is depricated!

Marcos Pérez Gude Over a year ago

... or attaching events with addEventListener && attachEvent (IE)

Meowsome · Accepted Answer · 2015-07-30 10:03:28Z

0

Have you tried using the alternative JQuery function $(document).ready()?

  $( document ).ready(function() {
     $(".intro-content").animate({
         left: '20px',
         opacity: '1.0'
     });
  });

answered Jul 30, 2015 at 10:03

Meowsome

991 silver badge10 bronze badges

Collectives™ on Stack Overflow

jQuery on load event do not trigger script

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related