web-dev-qa-db-ja.com

私のサイトのすべてのページにjavascript / jQuery OnLoadを含めるための最良の方法

現在、私のtheme.infoファイルには2つのスクリプトが含まれています。

scripts[] = js/backstretch.js
scripts[] = js/scripts.js

Backstretchは、ページ全体をカバーする拡大背景画像を可能にするjQueryプラグインです。

私は現在、JSを自動ロードするためにこのコードを使用しています：

(function ($) {

    var bgs=["bg1.jpg", "bg2.jpg"];
    var bgr=Math.floor(bgs.length * Math.random());
    $.backstretch(bgs[bgr], { speed: 1000 });

})(jQuery);

2つの問題：

  1. 時々、それはbackstretch.jsを適切にロードしません。これは、scripts.jsの現在のOnLoad関数と関係があるかもしれません。最初は画像を読み込みますが、ブラウザの最大の幅/高さは読み込みません。
  2. 何らかの理由で、サイトの1レベルを超えても機能しません（サイトを確認するとJSが読み込まれているようです（画像の場所がJSファイルに関連していない可能性がありますか？）。例：

機能：site.com、site.com/page

機能しない：site.com/dir/page、site.com/dir/dir/page

私のスクリプトファイルで、OnPageLoad（またはPreload？）のどの関数を使用するのが最適でしょうか。

よろしくお願いします。

7themingjavascript
3
Matt Rowles

DrupalでのJavaScriptの管理 、特に動作に関するセクションをお読みください。次のようなことをする必要があります：

(function ($) {

  Drupal.behaviors.exampleModule = {
    attach: function(context, settings) {
      var bgs=["bg1.jpg", "bg2.jpg"];
      var bgr=Math.floor(bgs.length * Math.random());
      $.backstretch(bgs[bgr], { speed: 1000 });
    }
  };

})(jQuery);
6
tim.plunkett