Question

每当我第一次加载页面时，我的脚本都没有加载，我需要刷新页面至少3次才能运行。如何在没有页面刷新的情况下运行脚本？这个特殊的脚本在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');
});

Answer 1

如果你将代码包装在window.onload函数中怎么办？

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

您的代码仅在html文档“准备就绪”并完全加载时运行。

Answer 2

您正在运行依赖于页面元素的Javascript，并且在元素位于页面之前执行javascript;

将所有代码包含在document.ready function

中

Answer 3

$(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');
});
});

将代码包装在ready函数中，以便在加载DOM后执行JavaScript。

我的脚本需要页面刷新才能运行

3 个答案: