2

I have a question about the difference between 

window.addEventListener('load', function(){ });

and

jQuery(window).bind("load", function () { });

I wanted my script code to execute last (and I can't place it last in the document by the way for other reasons), so I decided to run it until everything is loaded.

Using window.addEventListener('load' worked most of the times but sometimes It did got executed but too early.

jQuery(window).bind("load" is working much better, and seems like it get executed at the right time.

Can someone please tell me is there any diferrence between this two line of codes ?

Edit :

Document ready is executed in the order of document.ready(s), and I have to wait for some document.ready of other scripts in the footer of the page before doing anything. I have to, because I can't place my script after them. So no I can't use document.ready.

I am also working in Magento 1.9 which uses jquery 2.x so bind is not deprecated.

My script modify some elements in the page which are modifed with scripts placed in the footer.

Let's say I select element by class name 'A'. The script in the footer will change it to 'B' and my script will fail. This is why I wait for the last script to modify the element then I execute mine and select element by class name 'B'.

the addEventListener load sometimes execute before the last script which makes it look for element with class name 'B' while there isn't an element with class 'B' yet.

The jquery bind load never did that.

Nicole
  • 134
  • 15
  • 1
    You actually want document.ready: https://learn.jquery.com/using-jquery-core/document-ready/ – freedomn-m Dec 13 '19 at 09:56
  • I think both are same if you're using old `jquery` version. and this will be called at the end of the page load (script, image ..) – Kaushik Dec 13 '19 at 10:00
  • If you prefer native JS, try `document.addEventListener("DOMContentLoaded", function() {` i.e. use "DOMContentLoaded" instead of using the "load" event. (see https://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events for details). This is equivalent do jQuery's document.ready. Although it's hard to see why the "load" event would load too early...too early for what, exactly? – ADyson Dec 13 '19 at 10:20
  • But to answer your direct question, in terms of functionality, no there should be no difference between those two pieces of code you showed. The second one just wraps the first one inside some jQuery syntax. Although as per jQuery docs, the "bind" function has been superseded by "on" several years ago, and fully deprecated more recently. Unless you have a **very** old version of jQuery, you should be using "on" instead. See notes at https://api.jquery.com/bind/ – ADyson Dec 13 '19 at 10:24
  • The jQuery one is really just a wrapper over the original one, so if it fails sometimes with one, it will also fail with the other. What is it you need to wait for? There is probably a better way to handle the race condition. (also don't go the ready or DOMContentLoaded if onload fires too late, both will fire before.) – Kaiido Dec 13 '19 at 11:13
  • Please read edited question for more details – Nicole Dec 13 '19 at 11:41
  • "I can't place my script after them"...why not, exactly? Why can't you place yours later on in the footer? – ADyson Dec 13 '19 at 12:41
  • "bind is not deprecated"...yes but it was _superseded_ in v1.7. So you should still be using "on" as per jQuery's guidance in the documentation. It may or may not matter in this case, but there is no reason not to follow the recommended best practice anyway. – ADyson Dec 13 '19 at 12:42
  • P.S. As a workaround, why not just make your script search for elements with name "A". If you put that script in a place so it runs before the other scripts, then it should work, right? Or make it search for elements with className "a" _or_ classname "b" to cover both cases? Just some ideas. – ADyson Dec 13 '19 at 12:44
  • The workaround you recommended is what I am using right now. I feel like I did the right choice so I am glad you said that. I can't place my script after the other scripts because the footer is a part of an other template managed by an other developper. So I can't really ask him to include my script if there is a workaround. – Nicole Dec 13 '19 at 19:46

0 Answers0