詳しい人求む！

初めてhtmlを使ってHPを作ったのですが、上手くいきません。

締切済

質問者：yunnyunn2
質問日時：2021/06/14 14:13
回答数：3件

スライドショーを表示させる仕組みを作りたいのですが、ウェブサイトに表示が何回に一回、下の画像のような結果になり、表示されません。（スライドショーは動いてます）全てコードは借り物なので、あまり理解できてないですが、レスポンスが悪いのか・・構造上問題なのか、以前は下に空白が出来ていて、それは解決はしたのですが、今回の問題が出て悩んいます。スライドはフェードに変えてます。
【ＣSS】↓headの所です↓---------------------------------------------------------------------------
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery. …
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1 …
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery. …
<script type="text/javascript">
$(document).ready(function(){
$('.slider').bxSlider({
auto: true,
mode: 'fade',
pause: 5000,
});
});
</script>

【html】↓bodyの所です↓---------------------------------------------------------------------------
<div style="text-align:center;">
<div class="slider">
<img src="images/1gaszou.jpg"" alt="画像">
<img src="images/2gazou.jpg"" alt="画像">
<img src="images/3gazou.jpg"" alt="画像">
<img src="images/4gazou.jpg"" alt="画像">
<img src="images/5gazou.jpg"" alt="画像">
</div>
</div>

あと、これをjsフォルダーに入れてます→（jquery1.4.4.min）

画像１枚のサイズは500KB前後です、大きさは1200×820程度です
サイト全てのサイズは100MBです、htmlだけなら8.10KBです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

参考程度に

No.3

回答者： fujillin
回答日時：2021/06/15 00:15

こんばんは

bxsliderを使っているようですが、中を調べたわけではありませんのではっきりとは断言できませんが・・・

仮にご提示のソースが全てだとすると、画像のサイズ指定をしていないようなので、bxsliderが画像のサイズを取得しようとした際に、まだ画像をロードできていないと、サイズが不明になってしまう可能性があります。

＞画像１枚のサイズは500KB前後です、
から考えると、それほどのタイムラグができるとも思えませんけれど…

念のため、以下のように変えてみても、同じ事象が発生するでしょうか？
1）bxsliderの設定タイミングを変える
>$(document).ready(function(){ ～～
をready（=DOMready)ではなく、load（=画像等のload終了時）に変えてみる。
具体的には、
　$(window).load(function(){ ～～

あるいは、
2）画像サイズを読み込む前に明示しておく
例えば、
<img src="○○.jpg" width="1200" height="820" alt="画像" />
とか。
bxslider側がどのように設定しているかを確認してはいませんけれど、多分、CSSで指定しておいても同様ではないかと想像します。
　.slider img { width: 1200px; height: 820px; }
など。

もしも、1）、2）のどちらかで再発しなくなれば、おそらく原因は上記にあるものと想像されます。
（1200×820って、随分デカいのでは(？)とは思いますけれど…）