Bootstrap Modal 打开后加载图片

Question

在尝试了 Stackoverflow 的许多解决方案后，我想看看是否有人可以提供帮助。我正在使用这个模板 - https://startbootstrap.com/template-overviews/agency/。此时，页面加载时正在加载图像。我希望在打开模式时加载图像。

工作原理：

$('img[src="img/port/wait-images.jpg"]').each(function(index, el) {
    $(el).attr('src', $(el).data('real-src'));
});
var globalLazyLoad = new LazyLoad();

<img class="img-fluid" src="img/port/wait-images.jpg" data-real-src="img/port/the-real-image.jpg" alt="">

此代码仅在页面加载时显示等待图像。

问题：

我希望在打开模式时加载某些图像。

Answer 1

您应该在打开模式调用时触发该延迟加载方法。

function loadImagesToModal(){
  $('img[src="img/port/wait-images.jpg"]').each(function(index, el) {
    $(el).attr('src', $(el).data('real-src'));
  });
}
$({the modal's class}).on('shown.bs.modal', function (e) {
    loadImagesToModal();
})

这样你就可以让他们只在那个事件上交换