画面内に要素が入ったら上から順番にクラス名を追加する

Question

###前提・実現したいこと

• ページ内の画像が読み込まれている間はローディングを表示
• 画像が全て読み込まれたら処理を開始
• 画面内に対象の要素が入ったら画面の左からフェードインしながら下から上に移動しながら表示
• 画面途中でリロードした時にすでにスクロールが終わっていて画面から外れている要素にも処理を実行
• ページ内には画像とテキストが混ざっていて、ページによって画像の数もテキストの数も決まっていない
• 「jquery-2.2.4.js」を使用

###想定している処理

• jQuery

画面内に要素が入ったらクラス名「transparent」がある要素にクラス名「fadein」を追加
画像の読み込みが終わったらクラス名「loading」を削除

• css

「fadein」と「transparent」で動きをつける

###発生している問題

• 色々なサイトを参考に下記のようにしてみましたが、スクロールを開始するとまだ画面に入っていない要素にもクラス名がついてしまいます
• 画面途中でリロードしてからスクロールすると画面の外にある「fadein」から順番にクラス名が追加されていき、なかなか画面内の要素にクラス名が追加されません
• 画像の読み込みが終わったらクラス名「loading」を削除するという処理をどこに入れたら良いかがわからなくなりました

###該当のソースコード

$(function() {
	var images = document.getElementsByTagName('img');
	for (var i = 0; i < images.length; i++) {
		var img = new Image();
		img.onload = function() {
			var transparent = $(".transparent");
			$(window).scroll(function(){
				var transparentPosition = $(transparent).offset().top - $(window).height();	
				if ($(window).scrollTop() > transparentPosition + 200) {
					$.each(transparent, function(index) {
						$(this).delay(index * 500).queue(function() {
							$(this).addClass('fadein');
						});
					});
				}
			});
		}
		img.src = images[i].src;
	};
});

（css下記を基本に複数用意しているので一部を抜粋しています）

.transparent .title {
	opacity : 0;
	transform : translate(0, 50px);
	transition: all 500ms ease-out;
}

.transparent.fadein .title {
	opacity : 1;
	transform : translate(0, 0);
}

lazysizes.jsやinview.jsなどのプラグインとも組み合わせたりして実現できないかと試してみましたがうまくいきませんでした。

色々と調べてみているのですが、どんどんわからなくなってきてしまいました。。
画像が全て読み込まれてから処理が開始されているかどうかの確認の仕方がわからず、ちゃんとその処理も動いているのかもちょっとわかっていません。
想定している処理がそもそも違うなどもございましたらご指摘いただけると幸いです。
とても初歩的なところもあり恐縮ですが、何卒よろしくお願いいたします。

Answer 1

これで、

画面内に要素が入ったらクラス名「fadein」がある要素にクラス名「transparent」を追加

はできていると思います。

これでどうでしょう？

$(function() {
	$(window).on('scroll', function() {
		var count = 0; // 今回のスクロールで、遅延フェードインした回数
		var windowY = $(window).scrollTop() + $(window).height();

		$('.transparent').each(function() {
			if ($(this).hasClass('fadein')) {
				return;
			}

			var diffY = windowY - $(this).offset().top;

			if (diffY > $(this).height()) {
				// 画像が上すぎるときは、遅延しないでフェードイン
				$(this).addClass('fadein');
			}
			else if (diffY > 0) {
				// 遅延フェードインして、次に遅延フェードインする時間を延ばす
				$(this).delay(count++ * 500).queue(function() {
					$(this).addClass('fadein');
				});
			}
		});
	});
});

Comments

[groco]

ご回答くださりありがとうございます！
また、すみません、想定している処理のクラス名が逆になっていました。
--
誤）画面内に要素が入ったらクラス名「fadein」がある要素にクラス名「transparent」を追加
正）画面内に要素が入ったらクラス名「transparent」がある要素にクラス名「fadein」を追加
--

> 画面内に要素が入ったらクラス名「fadein」がある要素にクラス名「transparent」を追加
教えていただいたものに差し替えたところ、無事にこちらの処理ができていました。
スクロールして画面から上に出ている要素にもクラス名が追加されていて期待していた動きでした！

リロード時にも処理をさせたかったのと、クラス名をつけるタイミングをずらしたかったので下記にしてみました。

```javascript
$(function() {
$(window).on('load scroll', function() {
$('.transparent').each(function(index) {
var position = $(this).offset().top - $(window).height();
var diff = $(window).scrollTop() - position;

if (diff > 0 && ! $(this).hasClass('fadein')) {
$(this).delay(index * 150).queue(function() {
$(this).addClass('fadein');
});
}
});
});
});
```

> 画面途中でリロードしてからスクロールすると画面の外にある「fadein」から順番にクラス名が追加されていき、なかなか画面内の要素にクラス名が追加されません
クラス名が追加されるタイミングをずらしたいのですが、私が追加した書き方だとまた画面外から順番に処理が開始されてしまいこの問題が発生してしまいます。

どのようにしてあげると画面下部でリロードしてもこのような問題が起こらなくなるでしょうか。

[naomi3]

問題がないようで、現象が再現できません。HTMLと画像のサイズを教えてください。

[groco]

現在、テストページで使用している画像は合計で1.1MBです。
HTMLは下記となります。
--
（htmlは削除しました）
--

私が確認した方法を書かせていただきます。
--
１）フッターまでスクロールしてその場でリロード
２）ページの一番上の「transparent」から「fadein」が追加され、画面に表示されているフッター部分の「transparent」に「fadein」が追加されるのにタイムラグが発生してしまう
--

何卒よろしくお願いいたします。

[naomi3]

コードを修正したので、直っていませんか？

[groco]

修正いただきありがとうございます。
無事に解決いたしました！
何度もご対応くださりありがとうございました。