触发后在Modal中加载图像

Question

我希望在打开模式时加载图像，而不是在页面加载时加载图像。我有此脚本，但无法正常工作。这意味着它不会加载实际图像，而只会加载等待图像。但是由于图像代码，它正在加载等待图像，请看下面。

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


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

有人可以告诉我怎么了吗？

--------更新--------

我决定使用Yall插件。乔凡·克鲁兹（Giovan Cruz）说过要尝试一个插件，所以我做了谢谢。它可以将图像从加载图像更改为真实图像。但是它仍然在页面加载时加载图像。这是我正在使用的代码。

<script src="yall-2.1.0.min.js"></script>
<script>document.addEventListener("DOMContentLoaded", yall);</script>
<img class="lazy" src="img/placeholder.jpg" data-src="img/image-to-lazy-load.jpg">

--------更新2 --------

有效！！！！我最终使用了yall插件。添加了上面的代码，现在所有工作。