$（window）.load（）の問題でプリロード - jquery、preloader

私は私のウェブサイトのコンテンツをプリロードするために以下のアプローチを使っています：

$(window).load(function(){
$("#preLoader").hide();
$("#container").show();
});

今私の#container divは私のウェブサイトをすべて含んでいますコンテンツ。私は私の体の背景画像が完全にロードされるまでこれを見せたくありません…それで背景画像がロードされている間、#preLoader divはアニメーションローダーgifを表示します。

問題：

利用できないリソースを含むサーバーが原因で常にロードされるとは限らない要素がいくつかあります（例：グラビア）。 $(window).load() ページの読み込みが完了していないため、functionは実行されません - 利用できないリソースをダウンロードしようとして立ち往生し、ローダーを表示し続けます。

ロード機能が実行できるように応答するのに時間がかかりすぎる要求を無視するにはどうすればよいですか - ローダーを隠してコンテンツを表示する。

私は使いたくない $(document).ready() それは私の背景画像がロードを終了するまで待つことはありませんので、機能、...

回答：

回答№1は2

背景画像をプリロードしようとしているだけの場合は、次のようにします。

$(document).ready(function() {
$("#preLoader").show();
$("#container").hide();

$("<img>", {src: "/url/of/image.jpg"}).load(function() {
$("#preLoader").hide();
$("#container").show();
}).error(function() {
// Something went wrong
});
});

より良い代替手段は waitForImagesプラグイン：

$(document).ready(function() {
$("#preLoader").show();
$("#container").hide();

$(document).waitForImages(function() {
$("#preLoader").hide();
$("#container").show();
});
});

---

回答№2の場合は0

あなたはいくつかのトリックを試すべきです。 gravatarのようにすべての要素についてページのソースを変更します。

<img data-src="/images/http://some-very-busy-resource.org/avatar.jpg" />

「src」属性が表示されていないことを確認してください。ブラウザがこの画像とページを高速にロードすることは絶対にしていません。

それから、無視された画像をロードするために、このコードを追加してください：

   $("body").find("img").each(function(){
src = $(this).data("src");

if ("undefined" !== typeof src) {
$(this).attr("src", src);
}
});

したがって、新しいスクリプトは次のようになります。

$(function(){
$("#preLoader").hide();
$("#container").show();
$("body").find("img").each(function(){
src = $(this).data("src");
if ("undefined" !== typeof src) {
$(this).attr("src", src);
}
});
});

---