如何在JavaScript中判断Django返回的图像字典是否全部加载完成

你可以通过手动预加载所有图片、统计加载完成状态的方式实现需求，无需调整后端Django的返回逻辑，仅修改前端JS代码即可替换原有不可靠的固定延时方案：

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "/common/load-common-data/",
        cache: false,
        success: function (context) {
            const images = context.images;
            // 提取所有图片URL，可根据实际字典结构调整取值逻辑
            const imageUrls = Object.values(images);
            let loadedCount = 0;
            const totalCount = imageUrls.length;

            imageUrls.forEach(url => {
                const img = new Image();
                // 加载成功处理
                img.onload = () => {
                    loadedCount++;
                    checkAllLoaded();
                };
                // 加载失败处理，避免单图异常阻塞整个流程
                img.onerror = () => {
                    console.warn(`图片加载失败，URL：${url}`);
                    loadedCount++;
                    checkAllLoaded();
                };
                img.src = url;
            });

            // 校验是否全部图片完成加载
            function checkAllLoaded() {
                if (loadedCount === totalCount) {
                    displayImages(images);
                }
            }
        }
    });
});

适配说明 #

• 如果Django返回的图片字典不是直接以URL作为值，比如每个字典值是包含url字段的对象，可以将imageUrls的提取逻辑修改为const imageUrls = Object.values(images).map(item => item.url)
• 预加载的图片会自动存入浏览器缓存，后续调用displayImages渲染页面时不会重复发起网络请求
• 如果业务要求所有图片必须全部加载成功才允许展示，可以删除onerror中的loadedCount++逻辑，替换为自定义的加载失败降级处理

内容的提问来源于stack exchange，提问作者Psionman