質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

4回答

3140閲覧

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

tekumak

総合スコア25

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/11/02 01:49

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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回目以降でのそのスクリーンショットの画像を載せてもらえるでしょうか?
guest

回答4

0

ベストアンサー

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

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

0

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

js

1clearTimeouit(count);

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

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

投稿2018/11/02 02:20

編集2018/11/02 02:22
akihiro3

総合スコア955

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

あらかじめ合体させた画像を背景に指定し、そのポジションをずらす方法を取られては?
参考サイトの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>

投稿2018/11/02 02:13

編集2018/11/02 04:51
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tekumak

2018/11/02 03:10

ご回答ありがとうございます。 実はこのアニメーション部分が30か所ほどありまして、この数の画像を合体させるのは少し骨が折れるので避けたいのです…。
guest

0

一定間隔で画像が切り替わるパラパラ漫画のようなアニメーションを実装しました。

1つのアニメーションGIFにまとめる、というのが手っ取り早い解決策かもしれません。

投稿2018/11/02 01:53

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tekumak

2018/11/02 01:59

ご回答ありがとうございます。 画質が下がる、という理由で、あまりGIFにはしたくないのです…。
maisumakun

2018/11/02 02:06

IE/Edgeを無視できるなら、APNGという選択肢もあります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問