使用 Ajax 将一些图像插入 div 后，猫头鹰轮播不显示

Question

我正在使用Laravel。我想要做的是将一些 div 插入到.content 基本上我select some data from database 并在.content 中使用javascript 插入

我正在使用owl carousel 滑动图像。 问题是，owl carousel 在我选择数据之前是called，然后是.content 和它的display none，因为在加载猫头鹰轮播时没有.item-images。

问题是，我该如何解决这个问题？

我已经测试了向 owl carousel 添加超时 5 秒并且正在工作，但是当您访问该站点时，图像出现时会有一点延迟（当然是因为 5 秒超时），我不想要用户体验。

index.blade.php

<div class="content">
    <div class="list" id="list">
    </div>
</div>

app.js

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$(document).ready(() => {
    var owl2 = $('.item-images').owlCarousel({
        items: 1,
        dots: true,
        nav: true,
        loop: false,
        autoplay: false,
        mouseDrag: false,
        smartSpeed: 500
    });
})


$.ajax({
    url: 'api/getItemsFromDb', 
    type: "POST",
    data: {
        user: '1'
    },
    success: function (c)
    {
        innerItemsToContent(c);                                  
    },
    error: function(e)
    {
       console.log(e);
    }
});


function innerItemsToContent(item)
{
    var container = document.getElementById("list");
    if(container)
    {
        item.forEach(e => {
            container.innerHTML += `
                <div class="item">
                    <div class="title">${e.title}</div>
                    <div class="message">${e.message}</div>
                    <div class="item-images owl-carousel" id="img_insert"></div>
                </div>
            `;

            var container_img = document.getElementById("img_insert");

            for(var i = 0; i < e.count_pictures; i++)
            {
                console.log('test');
                container_img.innerHTML += `
                    <img src="assets/tools/img_posts_test/${e.img[i].img_laravel_name}.${e.img[i].img_type}" name="${e.id} item id" class="img-item-style">
                `;
            }
        });
    }
}

API.php（控制器）

public function getItemsFromDb(Request $r)
{
    $r->validate([
        'user' => 'required'
    ]);

    $data = DB::table('items')->where('item_id', '=', 1)->orderBy('id', 'asc')->limit(1)->get();
    $img = DB::table('images')->where('belongs_to_item', '=', 1)->orderBy('id', 'asc')->get();

    foreach($data as $d)
    {
        if($d->count_pictures > 0)
        {
            $count = 0;
            foreach($img as $i)
            {
                $d->img[$count] = $i;
                $count++;
            }
        }

    }


    return $data;
}

Answer 1

当您通过 Ajax 设置追加新数据时，当您的 ajax 函数完成时 - 您必须设置 callbak 函数以刷新轮播：

1. 将轮播选项复制到新变量中

2. 调用轮播初始化

   var optionsAfterAjax = {
      items: 1,
      dots: true,
      nav: true,
      loop: false,
      autoplay: false,
      mouseDrag: false,
      smartSpeed: 500
    }
    $(".item-images").owlCarousel(optionsAfterAjax);