PHP环境下HTML压缩导致懒加载图片无法显示的问题咨询及解决方法

看起来你碰到了HTML压缩后懒加载图片失效的麻烦，我来帮你拆解下原因和可行的解决思路～

问题原因分析 #

你遇到的这个情况，大概率是因为HTML压缩工具移除了img标签里data-src属性内部的必要空格。很多懒加载JavaScript库对属性值的格式有特定依赖，压缩时如果不小心删掉了这些空格，就会导致库无法正确识别data-src属性，自然就加载不出图片了。

如何避免这个问题？ #

给你几个实用的解决方向：

• 调整压缩工具的规则：如果你用的是PHP环境下的HTML压缩库（比如自定义的压缩脚本或者第三方工具），一定要配置规则，让它保留data-src这类懒加载相关属性的内部空格，不要随意精简这些属性的格式。
• 规范懒加载标签的写法：在编写HTML的时候，严格用引号包裹data-src的属性值，避免出现无引号或格式松散的写法，这样压缩工具误删空格的概率会低很多。
• 升级/调整懒加载脚本：有些老旧的懒加载库对压缩后的HTML兼容性较差，你可以尝试更新到更健壮的版本，或者修改脚本逻辑，让它能兼容没有多余空格的data-src属性。

另外你提到跳过某个脚本后懒加载图片就能正常显示了，我把你提供的脚本贴在这里方便分析：

<!-- debut -->
<script>
function result_filtre(art) {
    document.getElementById("resultat_filtre" + art).innerHTML = '<br />&nbsp;<center><img src="https://tn.tunisiebooking.com/theme/images/loader.gif"  alt="loader"  class="loading3" /></center><br />';
    $.ajax({
            url: "include/resulta_filtre_dest_og_new.php?libelle_art=" + art,
            cache: false,
            success: function(html) {
                var ch = html.split("###");
                // 省略后续代码
            }
    });
}
</script>

这个脚本通过AJAX加载内容并插入到页面中，有可能是AJAX返回的HTML内容在压缩后，里面的懒加载图片标签格式出了问题，或者脚本插入的加载动画元素干扰了懒加载库的识别逻辑。你可以检查下AJAX接口返回的HTML里，data-src属性的格式是否在压缩后被破坏了。

备注：内容来源于stack exchange，提问作者ben yahia ikram