懒加载不工作

[SnowMeteors]

我自定义了一个相册页面 结构目录如下 这里的source不是主题下的source

source
 └─photo
      ├─album.css
      ├─index.md
      ├─album.js
      └──album.json

其中album.js文件功能为从album.json中读取数据，并动态添加标签 内容如下

album = {
    init: function() {
        const that = this;
        $.getJSON("album.json",
            function(data) {
                that.render(data);
            });
    },
    render: function(data) {
        // 相册集数量
        let div = "",name,link,cover;
        let albumCnt = data.album.length;

        for(let i = 0;i < albumCnt;i++){
            link = data.album[i].link;
            name = data.album[i].name;
            cover = data.album[i].cover;

            // 获取图片数量
            let photoCnt = 0;
            for(let j = 0;j < data.album[i].photo.length;j++){

                photoCnt += data.album[i].photo[j].info.length;
            }

            div +=
                '<div class="gallery-group">' +
                    '<a href="'+ link +'">' +
                        '<img src="'+ cover + '" />' +
                        '<span class="group-name">'+ name +'</span>' +
                        '<span class="photoCnt">'+ photoCnt +'</span>'+
                    '</a>' +
                '</div>'
            ;
        }
        $("#group-main").append(div)
    }
};

index.md的内容如下

---
title: photo
date: 2021-02-04 11:38:27
photo: true
hide_wordcount: false
HideComment: true
---
<script src="album.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="album.css"/>
<script type="text/javascript">album.init();</script>
<div id="group-main"></div>
<!-- 测试下面这张懒加载图片 -->
<img src="https://upimage.alexhchu.com/2020/04/12/71e895eb87fb4.jpg">

这两张图片是album.js渲染出来的，img标签中并没有加上懒加载标签

这张图片是index.md中 测试下面这张懒加载图片 下的图片，可以看见有懒加载标签

导致album.js动态渲染出来的图片，没有加上懒加载的标签问题，我猜测有可能在懒加载插件之后才渲染，请问我该如何解决这一问题

[Troy-Yang]

是的，你的猜测没错，默认情况下，当页面加载后，懒加载会预先替换所以当前页面图片url，但是你的图片是通过ajax call后加出来的，所以是找不到的。

可以试试把isSPA设为true 呢，然后再$("#group-main").append(div) 之后调用window.imageLazyLoadSetting. processImages() 方法去触发第一次替换，之后的会在scroll 后，每次自动调用该方法。