javascript - bLazy and Vue.js - DOM not ready fast enough -

i working on simple gallery pictures. wanted use blazy plugin load images, works fine except fact wanted load image list via external json file , because of images elements not created fast enough, when blazy script loaded, can't see images yes.

if use settimeout works, nasty way of doing things... ideas how refactor code?

please note work in progress , use routers later...

app.js:

var allpics = vue.extend({ el: function () {     return "#gallery"; }, data: function () {     return {         pics: {},         folders: {             full: "img/gallery/full_size/",             mid: "img/gallery/mid/",             small: "img/gallery/small/",             zoom: "img/gallery/zoom/"         }     }; }, created: function () {     this.fetchdata(); }, ready: function () {     settimeout(function () {         var blazy = new blazy({          });     }, 1000);  }, methods: {     fetchdata: function () {         var self = this;         $.getjson("js/gallery.json", function (json) {             self.pics = json;         })     } } }); var router = new vuerouter({ });   router.start(allpics, 'body', function () {    }); 

html:

    <div id="gallery" class="gallery">         <div v-for="pic in pics.gallery" class="gallery_item">             <div class="img_div">                 <img class="b-lazy"                       src="data:image/gif;base64,r0lgodlhaqabaaaaach5baekaaealaaaaaabaaeaaaictaeaow=="                      data-src= "{{* folders.mid + pic.name}}"                       alt="{{pic.alt}}" >             </div>         </div> 

you might want check https://github.com/afarkas/lazysizes, detects dom changes automatically, don't have settimeout hacks.

only add script , add class lazyload use data-src instead of src , done.