在jQuery DataTable中集成lozad.js后图片丢失问题求助

我希望加快DataTable中从后端获取的图片加载速度，通过CDN引入lozad.js并使用jQuery进行初始化，但集成完成后图片出现丢失情况。附上集成后的图片效果截图及代码，恳请协助解决。

集成lozad后的图片效果：

我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/lozad"></script>
</head>

<body>
    <script>
        $(document).ready(function() {
            // Datatable Starts here
            var table = $('#menu-table').DataTable({
                "ajax": {
                    "url": "ajax-cstaff-get-menu-item.php",
                },
                'columns': [{
                        data: 'row'
                    },
                    {
                        data: 'mitem_pic',
                        render: function(data) {
                            if (data != "") {
                                return '<img data-src="../img/menu/' + data + "?" + new Date().getTime() + '"class="lozad img-fluid rounded" width="125px" height="120px"/>'
                            } else {
                                return ''
                            }
                        }
                    },
                    {
                        data: 'mitem_name'
                    },
                    {
                        data: 'mitem_price'
                    },
                    {
                        data: 'mitem_status'
                    },
                    {
                        data: 'mitem_id',
                        render: function(data, type, row) {
                            if (data != '') {
                                return '<div class="d-grid gap-2 d-md-block"> <a class="btn btn-outline-warning btn-sm btn-edit" data-id="' + data + '"> Edit </a> <a href= "cstaff-mng-menu-update-pic.php?mitem_id=' + data + '" class="btn btn-outline-info btn-sm btn-update-pic">Update Picture</a> <a class="btn btn-outline-danger btn-sm btn-delete" data-id="' + data + '"> Delete </a></div>'
                            } else {
                                return ''
                            }
                        }

                    },
                ]
            });

            // Initialize Lozad library
            lozad('.lozad', {
                load: function(el) {
                    el.src = el.dataset.src;
                    el.onload = function() {
                        // el.classList.add('fade')
                    }
                }
            }).observe()
        });
    </script>
</body>

</html>

问题核心是lozad初始化时机错误：DataTable通过AJAX异步加载数据，你在$(document).ready中直接初始化lozad时，表格的图片元素还未渲染到DOM中，lozad无法找到目标元素，导致图片不加载。

解决方法如下：

• 利用DataTable的drawCallback回调函数，每次表格完成渲染后，再初始化/重新扫描lozad元素
• 避免重复监听，每次重新初始化前断开之前的lozad实例

修改后的完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/lozad"></script>
</head>

<body>
    <script>
        $(document).ready(function() {
            // 声明lozad实例变量，用于后续断开监听
            var lozadObserver;

            // 初始化DataTable
            var table = $('#menu-table').DataTable({
                "ajax": {
                    "url": "ajax-cstaff-get-menu-item.php",
                },
                'columns': [{
                        data: 'row'
                    },
                    {
                        data: 'mitem_pic',
                        render: function(data) {
                            if (data != "") {
                                // 修正图片标签的空格问题：data-src闭合引号后添加空格再写class
                                return '<img data-src="../img/menu/' + data + "?" + new Date().getTime() + '" class="lozad img-fluid rounded" width="125px" height="120px"/>'
                            } else {
                                return ''
                            }
                        }
                    },
                    {
                        data: 'mitem_name'
                    },
                    {
                        data: 'mitem_price'
                    },
                    {
                        data: 'mitem_status'
                    },
                    {
                        data: 'mitem_id',
                        render: function(data, type, row) {
                            if (data != '') {
                                return '<div class="d-grid gap-2 d-md-block"> <a class="btn btn-outline-warning btn-sm btn-edit" data-id="' + data + '"> Edit </a> <a href= "cstaff-mng-menu-update-pic.php?mitem_id=' + data + '" class="btn btn-outline-info btn-sm btn-update-pic">Update Picture</a> <a class="btn btn-outline-danger btn-sm btn-delete" data-id="' + data + '"> Delete </a></div>'
                            } else {
                                return ''
                            }
                        }

                    },
                ],
                // 新增drawCallback：每次表格绘制完成后执行
                "drawCallback": function() {
                    // 如果已有监听实例，先断开
                    if (lozadObserver) {
                        lozadObserver.disconnect();
                    }
                    // 重新初始化lozad并开始监听
                    lozadObserver = lozad('.lozad', {
                        load: function(el) {
                            el.src = el.dataset.src;
                            el.onload = function() {
                                // 可按需添加加载完成后的样式
                                // el.classList.add('fade')
                            }
                        }
                    }).observe();
                }
            });
        });
    </script>
</body>

</html>

额外说明：原代码中图片标签的data-src闭合引号后直接拼接class，缺少空格，虽然浏览器可能兼容，但属于不规范写法，修改后的代码已修正该问题。

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