Question

我正在尝试将来自Instagram的实时Feed与Jssor幻灯片放映相结合，但遇到了问题。我在这里使用这个代码来使用特殊的哈希标记从Instagram中提取图片并将它们放入ID为“幻灯片”的div中，其中包含属性u="image"和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)
    )
}

因此，在页面上生成后的结果如下所示：

 <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>

但问题是，jssor幻灯片看不到页面上生成的那些图像。我试图使用window.addEventListener()和$(document).ready()函数延迟滑块代码和/或将脚本放在关闭正文标记的上方，但它仍无法正常工作：（

Answer 1

看起来是异步问题。

在jssor滑块的初始化（... new $ JssorSlider ...）之前，您可以完全生成所有内容。

btw，您何时以及如何致电＆＃39; createPhotoElement＆＃39;？

Answer 2

最后工作买了添加window.load

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

Jssor幻灯片生成内容

2 个答案: