延迟加载模式窗口，模式中的图像不显示答案

【问题标题】：Lazy Loading modal windows, image in modal doesn't display延迟加载模式窗口，模式中的图像不显示
【发布时间】：2019-05-24 16:11:16
【问题描述】：

我正在尝试延迟加载单击基于 CSS 的模式窗口时显示的图像。我正在使用 blazy 库，但模式窗口中的图像未显示。

疑难解答：

我确认图片会定期加载
我根据需要为 data-src 切换了 img src http://dinbror.dk/blog/blazy/?ref=demo-page
将 b-lazy 类添加到我希望在打开模式窗口时加载的图像。

 <div id="modalwindow1" class="modalbox">

 <div>
 <a class="closewindow" href="#close">X - Close Window</a>
 <h2>Business Name - Zebra paint job car</h2>
 <div class="container">

<data-src="images/zebra-car.jpg" width="1080" height="607" alt="Zebra paint job car"  class="b-lazy">

 </div>

 </div>
 </div>
<script src="blazy.js"></script>
<script>
var bLazy = new Blazy({ 

        //container: '#container' // Default is window
    });
</script>

我在

有上述的现场演示

http://lidia.kaptlid.com/template1.php

【问题讨论】：

标签： javascript lazy-loading simplemodal blazy

【解决方案1】：

您的标记缺少元素名称img。

你有： <data-src="images/zebra-car.jpg" width="1080" height="607" alt="Zebra paint job car" class="b-lazy">

但你想要： <img data-src="images/zebra-car.jpg" width="1080" height="607" alt="Zebra paint job car" class="b-lazy">

【讨论】：

我刚刚尝试了你的建议，但是它加载了所有图像，在firefox的网络面板中检查
没有理由不立即加载...从我所看到的来源来看，图像永远不会隐藏。
在我的演示页面上用 css 隐藏

【解决方案2】：

你可以在调用 Blazy 时添加选项“loadInvisible”来强制加载不可见的图片： http://dinbror.dk/blog/blazy/#Options

像这样使用它：

var bLazy = new Blazy({loadInvisible:true});

如果这不起作用，您可能必须在打开模式时调用 Blazy。

祝你好运！

【讨论】：