2

私のアプリケーションには、ログイン ゲートウェイとして機能する非常にシンプルなメイン ページがあります。ユーザーは最初にこのページに移動する必要があります。このページには jQuery がなく、非常に小さな JavaScript ファイルと小さな CSS ファイルがあります。それはすぐに読み込まれます。

ユーザーが画面に集中してログインの詳細を入力したり、タイトルやその他の情報を読み始めたりしている間に、ユーザーがログインしたときに備えて、いくつかの画像、CSS、または JavaScript を事前にロードして、この時間を最大限に活用したいと考えています。に進み、次の画面に進みます。

これを静かに行う方法はありますか (リソースが読み込まれているときにユーザーが画面の下部に表示されないようにすることをお勧めします)。次の画面を開くのにかかる時間を最小限に抑えるために、いくつかのファイルでもロードしたいだけです。

4

5 に答える 5

1

これは、CSS クラスに画像パスを配置することで実行できます。したがって、CSS クラスをロードすると、画像もロードされます。同様に、JavaScript を使用して画像をプリロードすることもできます。

以下は、私のプロジェクトのサンプル スニペットです。ここでは、jquery を使用して画像を読み込みます。純粋なJavaScriptでも同じことができます。

  loadImages : function(){
    this.picBaseUrl = BASE_URL + this.id + '/';  //base path for all images
    $('#p1').attr('src', this.picBaseUrl + '1.jpg');
    $('#p2').attr('src', this.picBaseUrl + '2.jpg');
    $('#p3').attr('src', this.picBaseUrl + '3.jpg');
    $('#p4').attr('src', this.picBaseUrl + '4.jpg');
    $('#p5').attr('src', this.picBaseUrl + '5.jpg');
}

ここで私は5つの画像をロードしました。これらの画像をロードするときはいつでも、必ずこのメソッドを呼び出してください。

于 2013-01-09T16:49:39.297 に答える
1

<頭>で：

<script src='' id="s1" type="text/javascript"></script>

あなたのページの最後に：

<script type="text/javascript">
var s1 = document.getElementById("s1");
s1.src= "myJavaScript.js";
</script>
</body>

すべてのリソースを myJavaScript.js に読み込むことができ、それらはページが完全に読み込まれた後に読み込まれます。

于 2013-01-09T16:53:32.110 に答える
1

画像の読み込みは、次の方法で行うことができます。

var img = new Image();
img.onload = function() {
     //image loaded
};
img.src = "image.png";
于 2013-01-09T17:05:06.650 に答える
0

JQueryがなければ、bodyタグにonloadイベントを使用すると思います。だから（未テスト）のようなもの：

<script>
function preLoad() {

document.getElementById("img1").src = "/images/image1toPreload.png";
document.getElementById("img2").src = "/images/image2toPreload.png";
document.getElementById("img3").src = "/images/image3toPreload.png";
}
</script>

...

<body onload="preLoad()">

your content here
...

<img style="display:none" id="img1"/>
<img style="display:none" id="img2"/>
<img style="display:none" id="img3"/>

于 2013-01-09T16:56:27.477 に答える
0

ページに n div (キャッシュされた画像ごとに 1 つ) を作成し、それらの css を定義します。

#Div1 {
background: url(path/cachedImage1.png) no-repeat;
display: none;
}
#Div2 {
background: url(path/cachedImage2.png) no-repeat;
display: none;
}
#Div3 {
background: url(path/cachedImage3.png) no-repeat;
display: none;
}
于 2013-01-09T17:09:11.683 に答える