CODEWITHSUNDEEP
javascriptjquery
Krystian
Krystian

Reputation: 987

Javascript works only on reloading page

On https://bm-translations.de/dolmetscher-franzoesisch-deutsch.php you can see the Header doesnt work like it does here: https://bm-translations.de

I guess out of some reason JS isnt working. But the strange thing is on reloading the page (strg + F5) its working. Whats wrong here?

I am loading Jquery first and in footer my own JS.

Upvotes: 0

Views: 55

Answers (2)

Soviut
Soviut

Reputation: 91525

This is most likely a race condition. You're probably running your javascript before the DOM has had a chance to load. The reason it works on the second reload is that the browser is using the cached version of the scripts.

There are a few ways you can deal with this:

Make sure you script tags don't have an async attribute. This tells them they're allowed to load in any order they'd like so your script may load before jQuery has had a chance to load.

Make sure your scripts are in the right order. The simplest is to move your scripts into the bottom of the body so that the browser loads it last. Make sure your scripts go after any dependent scripts, such as jQuery.

    <script src="jquery.js"></script>
    <script src="myscript.js"></script>
</body>

The other option is to use a "ready" event. Since you're using JQuery, you already have access to this by simply wrapping your function in a jQuery object with a callback function.

console.log('this will run before the DOM is loaded');

// wait for DOM to load inside jquery callback
$(function() {
    console.log('this will run after the DOM has loaded');
});

console.log('this will also run before the DOM is loaded');

The output of the above code would read:

'this will run before the DOM is loaded'
'this will also run before the DOM is loaded'
'this will also run before the DOM is loaded'

Upvotes: 2

Anas Al Hamdan
Anas Al Hamdan

Reputation: 768

because you have added async attribute to jquery script tag. you can not use the async attribute here if some other script is depending on jquery.

in https://bm-translations.de/dolmetscher-franzoesisch-deutsch.php

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

while in https://bm-translations.de

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script async="" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

more about async attribute.

Upvotes: 1

Related Questions