jquery.bxslider.js で画像の遅延ロード

https://polidog.jp/2017/04/26/bxslider/

↑こちらのサイトを参考に jquery.bxslider.js というスライダーを設置して、以下記述にて、遅延ロードを設定して、スライドが切り替わると同時に次の画像が読み込まれるような動作ができるようになりました。

<ul class="bxslider">
<li><img src="01.jpg" class="lazy"></li>
<li><img data-src="02.jpg" class="lazy"></li>
<li><img data-src="03.jpg" class="lazy"></li>
</ul>

<script>
$(window).load(
function () {
$('.bxslider').bxSlider({
auto: true,
mode:"fade",
speed:150,
easing:"ease-in-out",
pause:2500,
pager:false,

onSlideBefore: function(e) {
$($(e[0]).find('.lazy')).each(function(index,value){
var $target = $(value);
$target.attr('src', $target.data('src'))
$target.removeClass('lazy')
});
}
});	
});
</script>

現状の動作だと、１枚目のスライドのフェードアウトが終わった段階で、次の画像が読み込まれるので、一瞬白がでてしまい、少し動きがカクカクしてしまいます。

この動作を改良して、フェードアウトが終わった時に次の次の画像が読み込まれるような仕組みにすることは可能でしょうか？

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

回答2件

onSliderLoad、onSliderAfter時に前後の画像をロードすればいいかと。
ただ、画像の読み込み完了前にユーザの操作が発生すると空白は表示されますが。

html
1<ul class="bxslider">
2  <li><img src="https://dummyimage.com/600x400/ff0000/000000"></li>
3  <li><img data-src="https://dummyimage.com/600x400/00ff00/000000"></li>
4  <li><img data-src="https://dummyimage.com/600x400/0000ff/000000"></li>
5  <li><img data-src="https://dummyimage.com/600x400/ff0000/000000"></li>
6  <li><img data-src="https://dummyimage.com/600x400/00ff00/000000"></li>
7  <li><img data-src="https://dummyimage.com/600x400/0000ff/000000"></li>
8</ul>

javascript
1var lazyLoad = function (_this, currentIndex) {
2  var itemLength = _this.find('li').length - 1;
3  var prevIndex = currentIndex === 0 ? itemLength : currentIndex - 1;
4  var nextIndex = currentIndex === itemLength ? 0 : currentIndex + 1;
5  
6  var loadImage = function (index) {
7    var img = _this.find('img')[index];
8  	var src = img.getAttribute('data-src');
9    
10    img.setAttribute('src', src);
11    img.removeAttribute('data-src');
12  };
13  
14  loadImage(prevIndex);
15  loadImage(nextIndex);
16};
17
18$('.bxslider').bxSlider({
19  auto: false,
20  mode:"fade",
21  speed:150,
22  easing:"ease-in-out",
23  pause:2500,
24  pager:false,
25  
26  onSliderLoad: function (currentIndex) {
27    lazyLoad(this, currentIndex);
28  },
29  onSlideAfter: function ($slideElement, oldIndex, newIndex) {
30    lazyLoad(this, newIndex);
31  },
32});