3
私は外部のJavaScriptファイルが最後に読み込まれるようにしています。htmlページの読み込み後のjavascriptの読み込み
javascriptファイル "script.js"（画像スライダを制御する）は最後にする必要があります。私は、私のウェブページがファイルに定義されている赤い背景画像で覆われているので、今すぐロードしていないと思われます。 script.jsファイルを削除すると、私のWebページは正常に表示されますが、スライダー機能は動作しません。
最初の読み込み時に、適切なレイアウトが1秒間表示されてから、赤い背景イメージで覆われます。
<!-- script references -->
<!-- jquery script -->
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
\t <script type='text/javascript' src="js/bootstrap.min.js"></script>
<script type='text/javascript' src="js/classie.js"></script>
<script type='text/javascript' src="js/main.js"></script>
<!-- script -->
\t <script type='text/javascript' src="js/script.js"></script>現在、私のhtmlファイルの最後に、私が持っています動作しません。
My live website is here。私はその後、require.jsを試してみましたが、かなりのjavascriptの私の開始レベル与え失われてしまった
var script = document.createElement('script');
script.setAttribute('src', 'http://learningbycreating.com/js/script.js');
script.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(script);を試してみました。
私も
<script>
$.getScript("Your js file path",function(){
$(document).ready(ready);
});
</script>を試みたが、jQueryの使用に起因するエラーを受け取りました。
これが問題を引き起こしてのJavaScriptファイルには、次のとおりです。
(function() {
var pages = [].slice.call(document.querySelectorAll('.pages > .page')),
currentPage = 0,
revealerOpts = {
// the layers are the elements that move from the sides
nmbLayers: 3,
// bg color of each layer
bgcolor: ['#0092DD', '#fff', 'red'],
// effect classname
effect: 'anim--effect-1',
onStart: function(direction) {
// next page gets class page--animate-[direction]
var nextPage = pages[currentPage === 0 ? 0 : currentPage];
classie.add(nextPage, 'page--animate-' + direction);
},
onEnd: function(direction) {
// remove class page--animate-[direction] from next page
var nextPage = pages[currentPage === 0 ? pages.length - 1 : 0];
nextPage.className = 'page';
}
};
revealer = new Revealer(revealerOpts);
// clicking the page nav buttons
document.querySelector('button.pagenav__button--top').addEventListener('click', function() {
reveal('top');
});
document.querySelector('button.pagenav__button--bottom').addEventListener('click', function() {
reveal('bottom');
});
// triggers the effect by calling instance.reveal(direction, callbackTime, callbackFn)
function reveal(direction) {
var callbackTime = 750,
callbackFn = function() {
classie.remove(pages[currentPage], 'page--current');
currentPage = currentPage < pages.length - 1 ? currentPage + 1 : 0;
classie.add(pages[currentPage], 'page--current');
};
revealer.reveal(direction, callbackTime, callbackFn);
}
})();私が欠けているシンプルな修正があります任意のチャンス？
ありがとうございます！
あなたのスクリプトはbody要素の終了タグの直前ですか？ – ImprobabilityCast
スクリプトの読み込み順序が問題であることを証明してください。問題がなくなるかどうかを確認するために、ウィンドウがロードされてから10秒のタイムアウトを使用してスクリプトをロードします。 [完全で検証可能な最小限の例]（https://stackoverflow.com/help/mcve）も役立ちます。 – traktor53