仅在 Bootstrap 模式打开后延迟加载图像

Question

我在这里找到了两个相似的答案，但都没有成功解决我的情况（考虑到我将它们转化为我的情况的能力有限）。我有一个包含很多相当大图像的页面，Bootstrap 的默认方法是在页面加载时加载所有模态图像。可见的 html 呈现得相当快（我有一个微调器）但是隐藏模式的额外加载时间使页面不切实际。我希望页面仅加载可见（非模态）内容以完成页面加载（并清除微调器），然后仅在触发该模态时加载每个模态的内容。我已经尝试了我能找到的所有延迟加载解决方案，但图像不会在模态中呈现（'data-src' 占位符呈现但不呈现应该替换它们的 'src' 图像）。我只想延迟加载（或在 'show.bs.modal' 上加载）模态的大图像，这些图像在 'modal-body' class 内。我希望这已经足够清楚了。

示例代码：

/* Javascript placed in the head */

<script>

function lazyLoad(){
    var $images = $('.lazy_load');

    $images.each(function(){
        var $img = $(this),
            src = $img.attr('data-src');

        $img
            .on('load',imgLoaded($img[0]))
            .attr('src',src);
        });
    };

    $('.modal-body').on("show.bs.modal", function () {
    lazyLoad();
};          

</script>

/* HTML in the modal section */


<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="galleryheader">
                <img src="headerimage_1.png" height="77" width="1024">
            </div>
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div>
                        <div class="modal-body lazy_load">
                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
                        </div>
                        <div class="modal-body lazy_load">
                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
                        </div>
                        <div class="modal-body lazy_load">
                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
                        </div>
                    </div>
                </div>
            </div>

                <div class="close-lower" data-dismiss="modal">
                <IMG SRC="images/close.jpg" WIDTH="85" HEIGHT="32"></a>
                </div>
            </div>
        </div>
</div>

Answer 1

首先，将 lazy_load class 放在 img 元素上，而不是放在父元素 div 上。其次，你需要的 jQuery 是这样的：

$('.portfolio-modal').on("show.bs.modal", function () {
    $('.lazy_load').each(function(){
        var img = $(this);
        img.attr('src', img.data('src'));
    });
});

备注：

使用portfolio-modalclass识别模态
使用 jQuery data() 方法来延迟加载图像。

仅在 Bootstrap 模式打开后延迟加载图像

Lazy Load Images Only After Bootstrap Modal has Opened

javascript

jquery

lazy-loading

bootstrap-modal