### JSによる画像切り替えの際、無限にリクエストされるのを止めたい https://zxcvbnmnbvcxz.com/jquery-setinterval-animate/index.html こちらのページを参考に、一定間隔で画像が切り替わるパラパラ漫画のようなアニメーションを実装しました。検証してみると、一度読み込んだ画像が無限にリクエストされているようで、これを一度のリクエストのみにとどめたいです。 ```html ``` ```js $(function(){ var count = setInterval(changeImg, 50); i = 1; function changeImg(){ $("#animation").children("img").attr("src","animation" + i + ".jpg"); if(i <= 50){ i++; } else{ i = 1; } } }); ``` できればプラグインを使用せずに解決したいのですが、何か方法はありますでしょうか。よろしくお願いします。

```javascript $(function(){ var imgs=Array(50).fill(null).map(function(x,y){ var img=new Image(); img.addEventListener('error',function(){ img.src="https://placehold.jp/ff0000/00ffff/100x100.png?text=nodata"; }); img.src="animation"+(y+101).toString().substr(-2)+".jpg"; return img; }); var i=0; setInterval(function(){ if(i>=imgs.length) i=0; $("#animation img:eq(0)").attr("src",imgs[i].src); i++; },1000); }); ```

あらかじめ合体させた画像を背景に指定し、そのポジションをずらす方法を取られては？参考サイトのDEMOにそのような記述がありました。 ```javascript $("#animateField").children("p").css("background-position", -120*i + "px"); ``` あとは、最初だけ要素を追加していき、あとは表示/非表示を切り替えるとか。 (※コードの一部は他の回答を参考にしてます) ```javascript .none { display: none; } (function () { // 非表示クラスの名前 const noneDisplayClass = 'none'; // img要素のテンプレートを削除します let imageTemaplate = document.querySelector('#imageContainer > img'); imageTemaplate.remove(); // 繰り返し処理を開始します let states = { url: imageTemaplate.src.replace(/=\d/, '='), imageContainer: document.getElementById('imageContainer'), imageTemaplate, imageNum: 5, prevIndex: 0, crntIndex: 0, }; nextImage(states); setInterval(() => nextImage(states), 1000 * 1, true); // 次のイメージに切り替えます function nextImage(states) { let { url, imageContainer, imageTemaplate, imageNum, prevIndex, crntIndex } = states; let images = imageContainer.children; let isConainerFulled = (images.length == imageNum); // 次の画像を非表示で配置します if (!isConainerFulled) { let newImage = imageTemaplate.cloneNode(true); newImage.src = newImage.alt = (url + crntIndex); newImage.classList.add(noneDisplayClass); imageContainer.appendChild(newImage); } // 画像を切り替えます images[prevIndex].classList.add(noneDisplayClass); images[crntIndex].classList.remove(noneDisplayClass); // 画像のインデックスを更新します states.prevIndex = crntIndex; states.crntIndex = ((crntIndex + 1) == states.imageNum) ? 0 : (crntIndex + 1); } }()); ```

JSによる画像切り替えの際、無限にリクエストされないようにしたい

JSによる画像切り替えの際、無限にリクエストされるのを止めたい

https://zxcvbnmnbvcxz.com/jquery-setinterval-animate/index.html
こちらのページを参考に、一定間隔で画像が切り替わるパラパラ漫画のようなアニメーションを実装しました。
検証してみると、一度読み込んだ画像が無限にリクエストされているようで、これを一度のリクエストのみにとどめたいです。

html
1<div id="animation"><img src="animation01.jpg"></div>

js
1$(function(){
2    var count = setInterval(changeImg, 50);
3    i = 1;
4    function changeImg(){
5        $("#animation").children("img").attr("src","animation" + i + ".jpg");
6        if(i <= 50){
7            i++;
8        }
9        else{
10            i = 1;
11        }
12    }
13});
14

できればプラグインを使用せずに解決したいのですが、何か方法はありますでしょうか。
よろしくお願いします。

x_x

2018/11/02 02:06

画像をリクエストした際のレスポンスヘッダはどのようになっていますか？

tekumak

2018/11/02 02:10

どちらを確認すればわかりますでしょうか？無知で申し訳ないです…。

x_x

2018/11/02 02:30

ChromeならデベロッパーツールのNetworkタブ、Firefoxなら開発ツールのネットワークタブ、IEなら開発者ツールのネットワークタブ、あるいはツールのFiddlerを使うなどで確認できます。

tekumak

2018/11/02 03:02

こちらで合っていますでしょうか。Accept-Ranges: bytes Content-Encoding: gzip Content-Type: image/jpeg Date: Fri, 02 Nov 2018 02:56:17 GMT Last-Modified: Thu, 06 Jul 2017 03:10:55 GMT Server: Apache Vary: Accept-Encoding

x_x

2018/11/02 03:11

2回目以降に「リクエストされている」と判断した理由は何ですか？

tekumak

2018/11/02 03:13

ChromeデベロッパーツールのNetworkタブで確認したところ、アニメーションで使用している画像のリクエストが無限に増えていったためです。

x_x

2018/11/02 03:18

2回目以降でのそのスクリーンショットの画像を載せてもらえるでしょうか？

行動規範の内容に同意します

回答4件

ベストアンサー

javascript
1<script>
2$(function(){
3  var imgs=Array(50).fill(null).map(function(x,y){
4    var img=new Image();
5    img.addEventListener('error',function(){
6      img.src="https://placehold.jp/ff0000/00ffff/100x100.png?text=nodata";
7    });
8    img.src="animation"+(y+101).toString().substr(-2)+".jpg";
9    return img;
10  });
11  var i=0;
12  setInterval(function(){
13    if(i>=imgs.length) i=0;
14     $("#animation img:eq(0)").attr("src",imgs[i].src);
15    i++;
16  },1000);
17});
18</script>
19
20<div id="animation"><img src="animation01.jpg"></div>
21
22

投稿2018/11/02 02:32

yambejp

総合スコア118268

tekumak

2018/11/02 03:00

ありがとうございます、ループかつ無限リクエスト無しの思い通りの挙動です！数字をいじったりして確認しているのですが、130枚の画像でアニメーションするにはどこを触ればいいのでしょうか…。 Array(50)を読み込む画像の枚数、substr(-2)を-3に書き換えたりしてみたのですが、(y+101)の部分の仕様がいまいち分からず苦戦しています。

yambejp

2018/11/02 03:28

> 130枚の画像 Array(50)→Array(130) (y+101).toString().substr(-2)→(y+1001).toString().substr(-3)

tekumak

2018/11/02 03:32

ありがとうございます！やっと理解できました！画像の枚数に一桁分増やして、その下●ケタの数字のみ取ってくる、という意味だったんですね！すっきりすると共に目からうろこです。こんな方法があったとは…。本当にありがとうございました。

行動規範の内容に同意します

そこまで自作出来たらあと一息ですよ

js
1clearTimeouit(count);

を条件分岐のなかに入れてください

で、
どのような状態に仕上げるかによって
i++を
$("#animation").children("img")・・・～～～
の真上や真下に移動したり
不等号を逆にしたりしてみてください

投稿2018/11/02 02:20

編集2018/11/02 02:22

akihiro3

総合スコア955

あらかじめ合体させた画像を背景に指定し、そのポジションをずらす方法を取られては？
参考サイトのDEMOにそのような記述がありました。

javascript
1$("#animateField").children("p").css("background-position", -120*i + "px");

あとは、最初だけ要素を追加していき、あとは表示/非表示を切り替えるとか。
(※コードの一部は他の回答を参考にしてます)

javascript
1<!doctype html>
2<html>
3
4<head>
5    <meta charset="UTF-8">
6    <style>
7        .none { display: none; }
8    </style>
9</head>
10
11<body>
12    <div id="imageContainer">
13        <!-- img要素のテンプレート -->
14        <img id="" src="https://placehold.jp/ff0000/00ffff/100x100.png?text=0" alt="error">
15    </div>
16    <script type="text/javascript" language="javascript">
17        (function () {
18            // 非表示クラスの名前
19            const noneDisplayClass = 'none';
20
21            // img要素のテンプレートを削除します
22            let imageTemaplate = document.querySelector('#imageContainer > img');
23            imageTemaplate.remove();
24
25            // 繰り返し処理を開始します
26            let states = {
27                url: imageTemaplate.src.replace(/=\d/, '='),
28                imageContainer: document.getElementById('imageContainer'),
29                imageTemaplate,
30                imageNum: 5,
31                prevIndex: 0,
32                crntIndex: 0,
33            };
34            nextImage(states);
35            setInterval(() => nextImage(states), 1000 * 1, true);
36
37            // 次のイメージに切り替えます
38            function nextImage(states) {
39                let { url, imageContainer, imageTemaplate, imageNum, prevIndex, crntIndex } = states;
40                let images = imageContainer.children;
41                let isConainerFulled = (images.length == imageNum);
42
43                // 次の画像を非表示で配置します
44                if (!isConainerFulled) {
45                    let newImage = imageTemaplate.cloneNode(true);
46                    newImage.src = newImage.alt = (url + crntIndex);
47                    newImage.classList.add(noneDisplayClass);
48                    imageContainer.appendChild(newImage);
49                }
50
51                // 画像を切り替えます
52                images[prevIndex].classList.add(noneDisplayClass);
53                images[crntIndex].classList.remove(noneDisplayClass);
54
55                // 画像のインデックスを更新します
56                states.prevIndex = crntIndex;
57                states.crntIndex = ((crntIndex + 1) == states.imageNum) ? 0 : (crntIndex + 1);
58            }
59        }());
60    </script>
61</body>
62
63</html>