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

Question

我正在尝试在单击基于CSS的模态窗口时显示显示的懒负载图像。我正在使用blazy库，而模态窗口中的图像未显示。

故障排除：

1. 我确认了图像定期

2. 我根据需要从http://dinbror.dk/blog/blazy/?ref=demo-page

3. 将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

Answer 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">

Answer 2

您可以添加选项" LoadInvisible"时，当您调用Blazy以强制负载不可见的映像：http://dinbror.dk/blog/blazy/#options

这样使用：

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

如果那不起作用，则在打开模态时可能必须致电Blazy。

祝你好运！