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

您应该使lazyload方法在打开的模式调用中触发。

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();
})

这样，您可以让它们仅在该事件上交换

Bootstrap模式打开后加载图像

1 个答案: