Jssor slides with generated content

Question

I am trying to incorporate live feed from instagram with Jssor slide show but having problems. I have this code here to pull pics from Instagram using special hash tag and place them into the div with id "slides" with attributes u="image" and src url.

function createPhotoElement(photo) {
    if((photo.caption) !== null){var photo_content = photo.caption.text + "  -  ";}      
    else { var photo_content = " "}
    return $('<div>')
   .append(
    $('<img>')
    .attr('u', 'image')
    .attr('src', photo.images.standard_resolution.url)
    )
}

So the result after being generated on the page looks like this:

 <div id="slides" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 960px; height: 380px;overflow: hidden;">        
    <div><img u="image" src="imgURL"></div>
    <div><img u="image" src="imgURL"></div>
    <div><img u="image" src="imgURL"></div>
    <div><img u="image" src="imgURL"></div>
    <div><img u="image" src="imgURL"></div>
</div>

BUT the problem is that jssor slides don't see those images being generated on the page. I tried to delay slider code using window.addEventListener() and $(document).ready() function and/or putting script just above the closing body tag and it still not working :(

Answer 1

Got it finally to work buy adding window.load

    $(window).load(function() {
    jssor_slider1_starter('slider1_container');
    });

Answer 2

It looks asynchronous problem.

Before the initialization (... new $JssorSlider...) of jssor slider, you'd make all content generated completely.

btw, when and how you call 'createPhotoElement'?