ECサイトで生成されるアイテムとアイテムの間にバナーを入れたい

Question

はじめまして、

■やりたいこと
サイトデザインを編集しているのですが商品と商品の間にバナーを差し込みたいです。
具体的には<div class="item"><img src=""></div>の100番目です。

<div class="item"><img src=""></div>は管理画面でアイテムを生成しています。

■問題
バナーが差し込まれるところまで画面をスクロールすると
HTML要素が一瞬表示されてしまいます。
これをなくしたい。

■HTML
<div class="ItemListInner crin">
        <div class="item"><img src=""></div>
	<div class="item"><img src=""></div>
                  |
                  |ｘ300
                  |
	<div class="item"><img src=""></div>
	<div class="item"><img src=""></div>
</div>

下記の写真のイメージ

入れたいバナーですが、スライダーです。

■HTML
<!--▼.ItemListInner .itemの間に入れる要素▼ -->
<div class="addition">
	<ul class="slider">
		<li><a class="slider-item01" href=""><img src=""></a></li>
		<li><a class="slider-item01" href=""><img src=""></a></li>
		<li><a class="slider-item01" href=""><img src=""></a></li>
		<li><a class="slider-item01" href=""><img src=""></a></li>
	</ul>
</div>
<!--▲.ItemListInner .itemに突っ込む要素▲ -->

■スタイルシート
<style>
//.itemの100番目に入れる空白の要素 に.spaceでrelativeをつかって空白をねじ込んでます。
	
.space{
　　　position: relative;
	display: inline-block;
	padding-top: 150%;
	vertical-align: bottom;
	box-sizing: border-box;
}	

// .itemの100番目に入れるスライダーの親要素.additionをabsoluteで.spaceの上に載せてます。
.addition {
	position: absolute;
	left: 0;
	width: 100% ;
	text-align: center;
　　 background:#f00;
	margin-top: -27.5vmin ;
}	
</style>

下にスクロールすると画面した付近でjQuery.Bottomプラグインが発動して次のページが読み込まれるという遅延ロードが始まります。
AJAXで制御されています。

<script type="text/javascript">
		var process_flg = false;
		var end_flg = false;
		$(window).bottom({proximity: 0.05});
		$(window).on('bottom', function() {
			if (process_flg == false && end_flg == false) {
				var max_page = $("#max_page").text();
				var next_page = $('#next_page').text();
				if (eval(max_page) >= eval(next_page)) {
					$.ajax({
						url: "{LoadItemsPageURL}" + next_page + "{LoadItemsPageURLParams}",
						dataType: 'html',
						beforeSend: function () {
							process_flg = true;
							$('#loading').css('display', 'block');
							
						},
						success: function (data) {
							$('#mainContent .ItemListInner').append(data);
							next_page = eval(next_page) + 1;
							$('#next_page').text(next_page);

						/* ▼.itemに入れる要素 ▼*/	
							$(function() {

							setTimeout(function(){
								let baneritem1 = $('.ItemListInner div.item:nth-child(100)');
								banneritem1.append( $('.addition'));　// .itemの100番目に入れる要素
							},400);

							let banneritem2 = $('.ItemListInner div.item:nth-child(100)');
							banneritem2.append('<div class="space"></div>');	//.itemの100番目に入れる空白の要素						
							});	

　　　　　　　　　　　　　　　/*▲ .itemに入れる要素 ▲*/	

						},
						complete: function () {
							process_flg = false;
							$('#loading').css('display', 'none');
						}
					});
				} else {
					end_flg = true;
				}
			}
		});
</script>		
コード

コレをやると100番目にスライダーは読み込まれるのですが・・・
途中でフッターが読み込まれるたびにHTML要素が一瞬表示されてしまいます。
なんとかならないでしょうか？
よろしくお願いいたします。

Answer 1

この時間なので、明日、質問のコードを実際に走らせて再現してみようと思うのですが。
以下のような方法はとれないということですよね？

<div class="ItemListInner crin">
        <div class="item"><img src=""></div>
	<div class="item"><img src=""></div>
                  |
                  |ｘ99
                  |
	<div class="item"><img src=""></div>
</div>

<!--▼.ItemListInner .itemの間に入れる要素▼ -->
<div>
	<ul class="slider">
		<li><a class="slider-item01" href=""><img src=""></a></li>
		<li><a class="slider-item01" href=""><img src=""></a></li>
		<li><a class="slider-item01" href=""><img src=""></a></li>
		<li><a class="slider-item01" href=""><img src=""></a></li>
	</ul>
</div>
<!--▲.ItemListInner .itemに突っ込む要素▲ -->

<div class="ItemListInner crin">
        <div class="item"><img src=""></div>
	<div class="item"><img src=""></div>
                  |
                  |ｘ200
                  |
	<div class="item"><img src=""></div>
</div>

Comments

[unoman]

ありがとうございます！！
そうなんです、できないんですよ。ちなみに書き忘れたのですがレスポンシブルになっております
ブレイクポイントは3つあって600（横並びアイテム数2個），960（横並びアイテム数3個）、1200（横並びアイテム数4個）になります。うまくレスポンシブルに合わせて100％表示でスライダーが入って行かないですね。
今は無理やりposition: relative;要素でボックスを差し込んで、その上にposition: absolute;でwidth:100%;でやるから上下真中にスライダーが収まってくれません。　画面広げたり縮めると、どちらかが見切れたり、異様に余白ができたりします。
appendで差し込んでposition:absolute;をCSSで無理やり差し込むからabsoluteのtop:;を入れられないです。
item要素から抜けてページのTOPまで行っちゃいます。

あとは、javascripよりHTMLのほうが表示速度が早いのでスクロールすると一瞬HTML要素が見えちゃうんですよね。画像はsetTimeOutで遅延でできるんですけどHTMLだけは・・・
困っております。

[penguin520]

なるほど。レシポンシブの構造なんですね。
質問にあるコードを使えば再現できるのは間違いないでしょうか？
夕方くらいに時間があれば再現してみようと思います。

>一瞬HTML要素が見えちゃう
visibility:hidden とかで隠すというのではだめなんでしょうか？
とりあえず、どのような動作をするのか見てみたいので
再現してみます。

[unoman]

ありがとうございます

そうなんです・・・。レスポンシブルなんです。
BASEのHelsinkiというテンプレートでやっています。デモも見れたはずです。

[penguin520]

BASEのHelsinkiというテンプレートがあるんですね。

こちらで再現性があるか検証しようとしたのですが、
なにか開発をしているのではなくて、テンプレートを改造しているだけのようですので、
すこし優先度が低いかと思いまして、まだ行っておりません。
（まぁ、そんなもののためにMP消費するのもなぁというところです。）

明日の夜に、時間があればやってみます。
とは、いえ、こちらも１件、アクシデントを抱えているので、それ次第です。
よろしくおねがいします。