画像スライドの際に、前の画像が一瞬出てくるのをなくしたいです。

前提

リストのそれぞれのリンクをホバーしたさいに、別の場所にある２つの画像が切り替わるようにしています。

実現したいこと

リンクをホバーした際に、前の画像がちらっと出てくるのをなくしたいです。

		<section id="business">
			<div class="business_img1"><img width="100%"></div>
			<div class="business_text">
					<h3 class="aboutus_title1">02 - BUSINESS</h3>
					<h2>仕事を知る</h2>
					<ul class="business_list">
						<li class="trigger1"><a href="survey_machine.php"><span>01</span>測量機販売・レンタル・メンテナンス</a></li>
						<li class="trigger2"><a href="industrial_measrement.php"><span>02</span>計測器販売</a></li>
						<li class="trigger3"><a href="copy_rental.php"><span>03</span>複合機レンタル・メンテナンス</a></li>
						<li class="trigger4"><a href="office_equipment.php"><span>04</span>OA事務機器</a></li>
						<li class="trigger5"><a href="copy_scan.php"><span>05</span>コピー・スキャニング</a></li>
						<li class="trigger6"><a href="3d_measurement.php"><span>06</span>3次元計測・モデル作成</a></li>
						<li class="trigger7"><a href="http://kameta.co.jp/ntplab/"><span>07</span>新技術推進研究所</a></li>
						<li class="trigger8"><a href="sell_stoking.php"><span>08</span>販売先・仕入れ先を見る</a></li>
					</ul>
			</div>
			<div class="business_img2"><img src="img/test2.jpg" class="Img"></div>	
		</section>

javascript
1$(function(){
2	var img0="img/index_defo1.png";
3	var img1="img/index_measurement1.png";
4	var img2="img/index_defo1.png";
5	var img3="img/index_copy_rental1.png";
6	var img4="img/index_OA1.png";
7	var img5="img/index_copyscan1.png";
8	var img6="img/index_3d_measurement1.png";
9	var img7="img/index_ntplab1.png";
10	var img8="img/index_3d_measurement1.png";
11
12  $(".business_img1 img").attr({"src": img0});
13	
14//.triggerホバーで画像切替
15  $(".trigger1").hover(
16    function(){
17      $(".business_img1 img").fadeOut(400).queue(function(){
18        $(this).attr({"src": img1}).fadeIn(400).dequeue();
19      });
20    },
21    function(){
22      $(".business_img1 img").fadeOut(400).queue(function(){
23        $(this).attr({"src": img0}).fadeIn(400).dequeue();
24      });
25    }
26    );
27	
28//.triggerホバーで画像切替
29  $(".trigger2").hover(
30    function(){
31      $(".business_img1 img").fadeOut(400).queue(function(){
32        $(this).attr({"src": img2}).fadeIn(400).dequeue();
33      });
34    },
35    function(){
36      $(".business_img1 img").fadeOut(400).queue(function(){
37        $(this).attr({"src": img0}).fadeIn(400).dequeue();
38      });
39    }
40    );
41	
42//.triggerホバーで画像切替
43  $(".trigger3").hover(
44    function(){
45      $(".business_img1 img").fadeOut(400).queue(function(){
46        $(this).attr({"src": img3}).fadeIn(400).dequeue();
47      });
48    },
49    function(){
50      $(".business_img1 img").fadeOut(400).queue(function(){
51        $(this).attr({"src": img0}).fadeIn(400).dequeue();
52      });
53    }
54    );
55	
56//.triggerホバーで画像切替
57  $(".trigger4").hover(
58    function(){
59      $(".business_img1 img").fadeOut(400).queue(function(){
60        $(this).attr({"src": img4}).fadeIn(400).dequeue();
61      });
62    },
63    function(){
64      $(".business_img1 img").fadeOut(400).queue(function(){
65        $(this).attr({"src": img0}).fadeIn(400).dequeue();
66      });
67    }
68    );
69	
70//.triggerホバーで画像切替
71  $(".trigger5").hover(
72    function(){
73      $(".business_img1 img").fadeOut(400).queue(function(){
74        $(this).attr({"src": img5}).fadeIn().dequeue();
75      });
76    },
77    function(){
78      $(".business_img1 img").fadeOut(400).queue(function(){
79        $(this).attr({"src": img0}).fadeIn(400).dequeue();
80      });
81    }
82    );
83	
84//.triggerホバーで画像切替
85  $(".trigger6").hover(
86    function(){
87      $(".business_img1 img").fadeOut(400).queue(function(){
88        $(this).attr({"src": img6}).fadeIn(400).dequeue();
89      });
90    },
91    function(){
92      $(".business_img1 img").fadeOut(400).queue(function(){
93        $(this).attr({"src": img0}).fadeIn(400).dequeue();
94      });
95    }
96    );
97	
98//.triggerホバーで画像切替
99  $(".trigger7").hover(
100    function(){
101      $(".business_img1 img").fadeOut(400).queue(function(){
102        $(this).attr({"src": img7}).fadeIn(400).dequeue();
103      });
104    },
105    function(){
106      $(".business_img1 img").fadeOut(400).queue(function(){
107        $(this).attr({"src": img0}).fadeIn(400).dequeue();
108      });
109    }
110    );
111	
112//.triggerホバーで画像切替
113  $(".trigger8").hover(
114    function(){
115      $(".business_img1 img").fadeOut(400).queue(function(){
116        $(this).attr({"src": img8}).fadeIn(400).dequeue();
117      });
118    },
119    function(){
120      $(".business_img1 img").fadeOut(400).queue(function(){
121        $(this).attr({"src": img0}).fadeIn(400).dequeue();
122      });
123    }
124    );
125});
126
127
128//右側画像ホバー時----------------------------------------------------------------------------------------
129
130$(function(){
131	var img0="img/index_defo2.png";
132	var img1="img/index_measurement2.png";
133	var img2="img/index_OA2.png";
134	var img3="img/index_copy_rental2.png";
135	var img4="img/index_OA2.png";
136	var img5="img/index_copyscan2.png";
137	var img6="img/index_3d_measurement2.png";
138	var img7="img/index_ntplab2.png";
139	var img8="img/index_defo2.png";
140
141  $(".business_img2 img").attr({"src": img0});
142	
143//.triggerホバーで画像切替
144  $(".trigger1").hover(
145    function(){
146      $(".business_img2 img").fadeOut(400).queue(function(){
147        $(this).attr({"src": img1}).fadeIn(400).dequeue();
148      });
149    },
150    function(){
151      $(".business_img2 img").fadeOut(400).queue(function(){
152        $(this).attr({"src": img0}).fadeIn(400).dequeue();
153      });
154    }
155    );
156	
157//.triggerホバーで画像切替
158  $(".trigger2").hover(
159    function(){
160      $(".business_img2 img").fadeOut(400).queue(function(){
161        $(this).attr({"src": img2}).fadeIn(400).dequeue();
162      });
163    },
164    function(){
165      $(".business_img2 img").fadeOut(400).queue(function(){
166        $(this).attr({"src": img0}).fadeIn(400).dequeue();
167      });
168    }
169    );
170	
171//.triggerホバーで画像切替
172  $(".trigger3").hover(
173    function(){
174      $(".business_img2 img").fadeOut(400).queue(function(){
175        $(this).attr({"src": img3}).fadeIn(400).dequeue();
176      });
177    },
178    function(){
179      $(".business_img2 img").fadeOut(400).queue(function(){
180        $(this).attr({"src": img0}).fadeIn(400).dequeue();
181      });
182    }
183    );
184	
185//.triggerホバーで画像切替
186  $(".trigger4").hover(
187    function(){
188      $(".business_img2 img").fadeOut(400).queue(function(){
189        $(this).attr({"src": img4}).fadeIn(400).dequeue();
190      });
191    },
192    function(){
193      $(".business_img2 img").fadeOut(400).queue(function(){
194        $(this).attr({"src": img0}).fadeIn(400).dequeue();
195      });
196    }
197    );
198	
199//.triggerホバーで画像切替
200  $(".trigger5").hover(
201    function(){
202      $(".business_img2 img").fadeOut(400).queue(function(){
203        $(this).attr({"src": img5}).fadeIn(400).dequeue();
204      });
205    },
206    function(){
207      $(".business_img2 img").fadeOut(400).queue(function(){
208        $(this).attr({"src": img0}).fadeIn(400).dequeue();
209      });
210    }
211    );
212	
213//.triggerホバーで画像切替
214  $(".trigger6").hover(
215    function(){
216      $(".business_img2 img").fadeOut(400).queue(function(){
217        $(this).attr({"src": img6}).fadeIn(400).dequeue();
218      });
219    },
220    function(){
221      $(".business_img2 img").fadeOut(400).queue(function(){
222        $(this).attr({"src": img0}).fadeIn(400).dequeue();
223      });
224    }
225    );
226	
227//.triggerホバーで画像切替
228  $(".trigger7").hover(
229    function(){
230      $(".business_img2 img").fadeOut(400).queue(function(){
231        $(this).attr({"src": img7}).fadeIn(400).dequeue();
232      });
233    },
234    function(){
235      $(".business_img2 img").fadeOut(400).queue(function(){
236        $(this).attr({"src": img0}).fadeIn(400).dequeue();
237      });
238    }
239    );
240	
241//.triggerホバーで画像切替
242  $(".trigger8").hover(
243    function(){
244      $(".business_img2 img").fadeOut(400).queue(function(){
245        $(this).attr({"src": img8}).fadeIn(400).dequeue();
246      });
247    },
248    function(){
249      $(".business_img2 img").fadeOut(400).queue(function(){
250        $(this).attr({"src": img0}).fadeIn(400).dequeue();
251      });
252    }
253    );
254});
255

試したこと

秒数を変更したりしましたが、切り替わる際にどうしても前の画像が出てきてしまいます。
お分かりの方いらっしゃいましたら、ご教唆お願いいたします。

yambejp

2022/09/08 08:07

画像を指定されると再現性が確認できませんどこかのサイトにアップして動作が確認できるようにできませんか？

m_y_kame

2022/09/08 23:45

返事が遅くなり申し訳ないです。下記にアップしましたので、確認お願いいたします。 http://kameta.co.jp/mm/slide/slide.html

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

回答1件

ベストアンサー

出来ました。

画像サイズが重いためhoverの瞬間に読み込むとちらつきます。
最初に読み込みようのdivを作りそこに全てbackgroundImageとして指定しておくことで最初に読み込ませキャッシュします。
その後はhover時にキャッシュが効いてちらつかないようです。

javascript
1$(function(){
2	var img0="img/index_defo1.png";
3	var img1="img/index_measurement1.png";
4	var img2="img/index_defo1.png";
5	var img3="img/index_copy_rental1.png";
6	var img4="img/index_OA1.png";
7	var img5="img/index_copyscan1.png";
8	var img6="img/index_3d_measurement1.png";
9	var img7="img/index_ntplab1.png";
10	var img8="img/index_3d_measurement1.png";
11//追加開始
12const div = document.createElement("div");
13div.style.backgroundImage=`url("${img0}"),url("${img1}"),url("${img2}"),url("${img3}"),url("${img4}"),url("${img5}"),url("${img6}"),url("${img7}"),url("${img8}")`;
14document.body.appendChild(div);
15//追加終了
16  $(".business_img1 img").attr({"src": img0});
17