javascript - 如何从 json 数据加载多个图像 - django

Question

我试图使用 ajax 请求在我的模板中显示多个图像，每个帖子都有多个图像，但是加载图像需要一些时间！

class Document(models.Model):
    booking =models.ForeignKey(Booking,on_delete=models.PROTECT)
    docs = models.ImageField(upload_to=upload_docs)

class Booking(models.Model):
    admin = models.ForeignKey(User,on_delete=models.CASCADE)
    title = models.CharField(max_length=40)

我的意见.py

def booking_detail_lists(request,id):
    obj = get_object_or_404(Booking,id=id)
    doc = Document.objects.filter(booking=obj)
    documents = []
    for i in doc:
        documents.append({
            'source':i.docs.url
        })

    data = {            
        'title':obj.title,
        'admin':obj.admin.username,
        'images':documents

    return JsonResponse({'data':data})

这是我加载图像的脚本，但是加载图像太慢了！

$.ajax({
        type:'GET',
        url:"{%url 'booking:booking_detail_lists' id=2222 %}".replace(/2222/,{{obj.id}}),
        success:function(data){
            if(data.data){
                let images = data.data.images
                imgs = ''
                for(i=0;i<images.length;i++){
                    imgs +=`
                    
                    <img src="${images[i]['source']}"
                         class="w-full" alt="">
                    `
                    console.log(images[i]['source'])
                }
                document.getElementById('images').innerHTML = imgs


            }
        }
    })

<div class="w-full md:w-6/12 mx-auto rounded-lg " id="images">
                </div>  

这是我的网址path('ajax/booking/<int:id>',booking_detail_lists , name='booking_detail_lists')，它加载太慢了！请问有没有更好的方法通过ajax加载图像数据？！`

标签： javascriptjqueryjsondjangoajax