Lazy image for dynamic images .appendSlide

1

Hello!
I’m trying to configure Swiper.
I have the following HTML code:

> <template>

	<div class="page">
        <div class="page-content" id="main-content">
          <div class="swiper-container demo-swiper">
		      <div class="swiper-wrapper">
		        <div class="swiper-slide">
		          <div class="swiper-zoom-container"><img data-src="http://lorempixel.com/600/900/sports/Dummy-Text/" class="swiper-lazy" @click="fullScreen"/></div>
		          <div class="preloader swiper-lazy-preloader"></div>
		        </div>
		        <div class="swiper-slide">
		          <div class="swiper-zoom-container"><img data-src="http://lorempixel.com/600/900/sports/Dummy-Text/" class="swiper-lazy" @click="fullScreen"/></div>
		          <div class="preloader swiper-lazy-preloader"></div>
		        </div>
		        <div class="swiper-slide">
		          <div class="swiper-zoom-container"><img data-src="http://lorempixel.com/600/900/sports/Dummy-Text/" class="swiper-lazy" @click="fullScreen"/></div>
		          <div class="preloader swiper-lazy-preloader"></div>
		        </div>
		      </div>
		    </div>
        </div>
    </div>
</template>

And JS:

<script>
  return {
  	on: {
  		pageInit() {
  			var self = this;
	        var swiperThumbs = self.$app.swiper.create('.demo-swiper', {
	        	lazy: true,
	        	speed: 400,
	            zoom: true,
	            on: {
	            	reachEnd: function () {
	            		swiperThumbs.appendSlide(['<div class="swiper-slide"><div class="swiper-zoom-container"><img data-src="http://lorempixel.com/600/900/sports/Dummy-Text/" class="swiper-lazy"/></div><div class="preloader swiper-lazy-preloader"></div></div>']);
	            	}
	            },
	        });
  		},
  	},
  	methods: {
  		fullScreen: function () {
  			var $ = this.$;
  			var $$ = Dom7;
        	var app = this.$app;
        	var hemenu = $$('#navbar').outerHeight(true);
        	//console.log($$('#navbar').outerHeight(true))
        	if ($$('#navbar').hasClass('navbar-hidden') == true) {
        		app.navbar.show('.navbar');
        		$$('#main-content').css('padding-top', hemenu+'px');
        		$$('#userBtn1').show();
        		$$('#userBtn2').show();
        		$$('#userBtn3').show();
        	} else {
        		app.navbar.hide('.navbar');
        		$$('#main-content').css('padding-top', '0px');
        		$$('#userBtn1').hide();
        		$$('#userBtn2').hide();
        		$$('#userBtn3').hide();
        	}
  		},
  		like: function () {

  		},
  	}
  }
</script>

When i use swiperThumbs.appendSlide lazy loading doesn’t work for new slides.
Why and how can I fix this?

Thank you!

2

any ideas? I have a few days break head

3

Try to call swiperThumbs.lazy.load(); after you append slide

4

https://jsfiddle.net/testideah/hqd7tcum/1/
I tried it, but it didn’t work.

5

What is exactly doesn’t work?

6

Preloader indicator after push new slides.
I tried your version and a few more, but it still does not start the image Preloader indicator.

7

Решили ли вы вопрос свой ? Владимир видимо технично ушёл от ответа …