My script needs page refresh for it to run

Question

Every time I load my page for the first time my script does not load, I need to refresh the page at least 3 times for it to run. How can I make my script run without a page refresh? This particular script is in BABEL.

'use strict';

var deg = 0;
var index = 0;

$('#' + index).css('opacity', '1');
$('.navbar').contextmenu(function () {
    return false;
});
$('.navbar').on('mousewheel', function (e) {
    var move = -60;
    var nextIndex = nextIndex = (index + 1) % 6;
    if (e.originalEvent.wheelDelta / 120 <= 0) {
        // wheel up
        move = 60;
        nextIndex = index  -1 < 0 ? 5 : index - 1;
    }
    $('.scroll-list').css('transform', 'rotateX(' + (deg + move) + 'deg)');
    $('#' + index).css('opacity', '0.01');
    $('#' + nextIndex).css('opacity', '1');
    index = nextIndex;
    deg = deg + move;
    event.stopPropagation();
    console.timeEnd('cache');
});

Do you have cache disabled in your browser? Where is your script added to the page? The `` or at the bottom of ``? — zero298, Oct 17 '17 at 13:55
this script is in js file and you include path of js file in html page? — Ketan Modi, Oct 17 '17 at 13:56
Your page may yet still be loading, so your script won't fire until it's fully loaded. @ChrisForrence solution is your best bet. — Tutch, Oct 17 '17 at 13:56
@zero298 my script is at the body I have tried and put in the head to check if it will work but it didn't. — Angelo, Oct 17 '17 at 13:58
@freedomn-m my point is that i need the script to run without a refresh. — Angelo, Oct 17 '17 at 14:00
Possible duplicate of [Is $(document).ready necessary?](https://stackoverflow.com/questions/4643990/is-document-ready-necessary) — zero298, Oct 17 '17 at 14:02
@Tutch I' am waiting 2 minutes now and it has no effect , also i have not have that much html/css for it to take so long to load. — Angelo, Oct 17 '17 at 14:04
@Angelo that's not what you've described. You've said it doesn't run on first load (which *is* a "refresh"). If the script is cached, it may run incorrectly until the cache updates itself (after refreshing a few times). By using ctrl-f5 once, your cache will be updated. This may not be the issue, hence the "try" - ie use ctrl-f5 rather than just f5. If it works, then your issue is with caching and there are ways to fix that. — freedomn-m, Oct 17 '17 at 14:19

Chtioui Malek · Accepted Answer · 2017-10-18T14:41:44.277

5

And what if you wrapped your code inside a window.onload function?

window.onload = function() { 
  // your code
}

Your code will only run when the html document is "ready" and fully loaded.

edited Oct 18 '17 at 14:41

answered Oct 17 '17 at 13:56

Chtioui Malek

11,197
1
72
69

1

plz try : $(window).on( "load", function() { ... }) – Chtioui Malek Oct 17 '17 at 14:07
1

the correct answer was : window.onload = function() { ...} . For some reason the $(window).on( "load", function() { ... }) didn't work. Could you change your answer to the correct one so i can give it to you because you basically gave me the answer and it may help someone else who has the same problem. – Angelo Oct 18 '17 at 14:35
1

@Angelo update done, but also now i see the 'real' problem, you have to put the jquery script call before your code, for example just after the body opening tag. because your script is using jquery. – Chtioui Malek Oct 18 '17 at 15:05

score 3 · Answer 2 · answered Oct 17 '17 at 13:58

3

You are running Javascript that depends on page elements and the javascript is executed before the elements are on the page;

Wrapp all your code inside document.ready function

answered Oct 17 '17 at 13:58

CREM

1,929
1
25
35

score 1 · Answer 3 · answered Oct 17 '17 at 14:00

$(document).ready(function () {
var deg = 0;
var index = 0;

$('#' + index).css('opacity', '1');
$('.navbar').contextmenu(function () {
    return false;
});
$('.navbar').on('mousewheel', function (e) {
    var move = -60;
    var nextIndex = nextIndex = (index + 1) % 6;
    if (e.originalEvent.wheelDelta / 120 <= 0) {
        // wheel up
        move = 60;
        nextIndex = index - 1 < 0 ? 5 : index - 1;
    }
    $('.scroll-list').css('transform', 'rotateX(' + (deg + move) + 'deg)');
    $('#' + index).css('opacity', '0.01');
    $('#' + nextIndex).css('opacity', '1');
    index = nextIndex;
    deg = deg + move;
    event.stopPropagation();
    console.timeEnd('cache');
});
});

Wrap your code in ready function, so that your JavaScript executes after DOM is loaded.

My script needs page refresh for it to run

3 Answers3