我正在尝试延迟加载在单击基于 css 的模态窗口时显示的图像。我正在使用 blazy 库,但模态窗口中的图像未显示。
疑难解答:
我确认图片会定期加载
我根据要求将 img src 换成了 data-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>
我有上面的现场演示
最佳答案
您的标记缺少元素名称 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">
关于javascript - 延迟加载模态窗口,模态中的图像不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56296205/