7

サムネイルを非同期的にロードする独自のスクリプトがいくつかある CMS (Squarespace) でホストされているフォト ギャラリー ページがあります。

ただし、実際の大きな画像はプリロードされていないため、次のように、独自のスクリプトをミックスに追加して、ブラウザがこれらの大きな画像をバックグラウンドでキャッシュにロードするようにすることにしました。

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

$(window).load(function(){
$.preLoadImages(
    "/picture/1.jpg",
    "/picture/2.jpg", //etc.
   );
});

コードを $(window).load() に配置しました。これはバックグラウンド スクリプトであり、実行する必要がないためです。パフォーマンスを向上させるだけです。

ただし、このスクリプトは何らかの形で CMS 独自のサムネイルのプリロード スクリプトをブロックしていると思います。

私は正しいですか？そして最も重要なことは、ページ上の他のすべてのスクリプトが実行された後にのみスクリプトが実行されるように指示する方法はありますか?

乾杯

4

2 に答える 2

2

JavaScript は常に実行されています。hoverたとえば、イベントは常に発生していmousemoveます。など...スクリプトの実行に「終わり」はありません。

ただし、あなたの場合、これは他のプリロードをブロックするべきではありません...document.readyコードを実行する前に実際にイメージをロードする必要がないため、ここでも使用できます。

実際、代わりに使用することでページの速度が実際に低下していますwindow.load...ブラウザによって以前に他のダウンロードと並列化される可能性があるときに、プリロードが後で開始されるためです。代わりにdocument.ready、次のように使用します。

$(function(){
  $.preLoadImages(
    "/picture/1.jpg",
    "/picture/2.jpg", //etc.
   );
});
于 2010-06-23T01:13:17.760 に答える
2

スクリプトはトップダウンでロードされ、本文のオンロードは通常、既存のオンロードに追加されます - その $(function().. がページの最後にある限り、最後に実行されます. (ニックのコメントに従って最後に) ) は、ドキュメントの最初の解析/実行を意味します)

于 2010-06-23T01:13:23.730 に答える