javascript - 画像などの二次リソースの読み込み

Question

画像スライダーのページを開いたときに、最初に画像とそのテキストを表示したいと思います。

これは私のデモです: http://codebins.com/bin/4ldqp9c/15

ここでは、すべての DOM 要素が読み込まれていることを示していますが、ページを開いたときに最初の画像とそのテキストを最初にスライダーに表示する必要があります。

そのため、すべての DOM 要素が読み込まれた後にその機能が開始されるように、スライダーの初期画像を読み込む方法を理解していません。

Answer 1

I believe the term is "bootstrapping". You want the first image to load in as the DOM is loading, and before your script sets up the image slider.

One way to achieve this is to actually put the image in as part of the DOM. So, instead of an empty src in your image tag, put an actual url. Same for title and description.

I assume you're going to be doing an ajax request for the XML you're building in your example. If that's the case, then you probably have no way of knowing what the first image is, which means you'll still need a script to load data.

The performance gains from having two scripts will probably be negligible, but if you take that approach, make sure you load the smaller script in the head section of your html, and the longer one at the end of your body.