仅在模态打开后加载图像

Question

我有一大格盒子。每个框打开一个模态。每个模态里面都有图像。

问题是页面加载了所有图像并且需要很长时间。我怎样才能让它仅在打开特定模态时加载模态的图像？也许还有 spinner gif？

我正在使用 custombox.js 插件。

$(document).ready(function() {
    $('.info').on('click', function(e) {
        Custombox.open({
            target: $(this).data('href'),
            effect: 'push',
            speed: 500,
            overlayColor: '#2C3E50',
            overlayClose: false,
            //overlayEffect: '',
            //overlayOpacity: 1,
        });
        e.preventDefault();
    });
});

编辑：模态代码示例

<div id="modal57" class="modal">
    <div id="portfolioItemClose" class="close"><span></span>
    </div>
    <div class="portfolioTitle wow fadeInLeft" data-wow-delay=".5s" data-wow-duration=".3s">ikuw solutions
    </div>
    <div class="portfolioImageBodyContainer">
        <div class="portfolioImage wow rotateIn" data-wow-delay=".3s" data-wow-duration=".3s">
            <div id="gallery" class="">
                <div class="content">
                    <img data-src="../../../../../assets/images/portfolio/brochures-flyers/20150102_ikuw_flyer-tech_oracle-pl-sql-tips-techniques_1.jpg" class="image_1">
                    <img data-src="../../../../../assets/images/portfolio/brochures-flyers/20150102_ikuw_flyer-tech_oracle-pl-sql-tips-techniques_2.jpg" class="image_2" style="display:none;">
                </div>
            </div>
        </div>
        <div class="portfolioBody wow fadeInDown" data-wow-delay=".5s" data-wow-duration=".3s">
            <div class="portfolioClientDescriptionUsage">
                <div class="portfolioBodyClient wow fadeIn" data-wow-delay=".8s">ikuw solutions</div>
                <div class="portfolioBodyDescription wow fadeIn" data-wow-delay=".9s">PL/SQL tips &amp; techniques flyer</div>
                <div class="portfolioBodyUsage wow fadeIn" data-wow-delay="1s">students</div>
            </div>
            <div class="portfolioBodyText wow fadeIn" data-wow-delay="1.1s">[text]</div>
            <div class="portfolioBodyPDF wow fadeIn" data-wow-delay="1.1s"><a href="../../../../../assets/images/portfolio/brochures-flyers/20150102_ikuw_flyer-tech_oracle-pl-sql-tips-techniques.pdf" target="_blank">View full-scale PDF&nbsp;&nbsp;<span class="fa fa-angle-right"></span></a></div>
            <div class="portfolioBodyLine wow zoomIn" data-wow-delay="1.2s" data-wow-duration=".3s"></div>
            <div class="portfolioBodyVersions wow fadeIn" data-wow-delay="1.3s">pages</div>
            <div class="thumbnail">
                <div class="thumb wow bounceIn" data-wow-delay="1.5s"><a href="#" rel="1"><img data-src="../../../../../assets/images/portfolio/brochures-flyers/thumb_20150102_ikuw_flyer-tech_oracle-pl-sql-tips-techniques_1.jpg" id="thumb_1" class="fit"></a></div>
                <div class="thumb wow bounceIn" data-wow-delay="1.6s"><a href="#" rel="2"><img data-src="../../../../../assets/images/portfolio/brochures-flyers/thumb_20150102_ikuw_flyer-tech_oracle-pl-sql-tips-techniques_2.jpg" id="thumb_2" class="fit"></a></div>
            </div>
        </div>
    </div>
</div>

Answer 1

一个解决方案是在加载时删除所有模态框图像源，并将它们的值保留在属性 data-src 中。然后，当您打开模态 window 时，由于相应的 data-src 值，您可以将源设置为仅打开模态图像。类似的东西：

$(document).ready(function () {
    // Considering that your modal divs have a class 'modal'
    $(".modal img").not(":visible").each(function () {
        $(this).data("src", this.src);
        this.src = "";
        // or remove the whole attribute with $(this).removeAttr("src")
    });

    // Set an attribute `data-sourcesAreSet` to each modal div in order to prevent setting the images sources if they are already set
    $(".modal").each(function () {
        $(this).data("sourcesAreSet", false);
    });

    $('.info').on('click', function (e) {

        var correspondingModal = $($(this).data('href'));

        // Only set the images sources if they are not already set.
        if (correspondingModal.data("sourcesAreSet") == false) {
            correspondingModal.find("img").each(function () {
                this.src = $(this).data("src");
                // or add the attribute with $(this).attr("src", $(this).data("src"))
            });
            correspondingModal.data("sourcesAreSet", true);
        }

        Custombox.open({
            target: $(this).data('href'),
            effect: 'push',
            speed: 500,
            overlayColor: '#2C3E50',
            overlayClose: false
        });
        e.preventDefault();
    });
});

以下是适用于上述代码的模态框示例：

<a data-href="#modal" class="info">Click here</a>

<div id="modal" class="modal-demo modal">
    <button type="button" class="close" onclick="Custombox.close();">
        <span>&times;</span><span class="sr-only">Close</span>
    </button>
    <h4 class="title">Modal title</h4>
    <div class="text">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <img src="Images/example.png" />
    </div>
</div>

如果您还想在加载图片时显示微调 gif，您可以按照建议对每张图片执行一些操作 in this answer，或者，您可以 div 大到带有微调 gif 的模态框，您可以将其隐藏在自定义框的 "complete" 回调函数中，但我不确定是否在所有图像加载完成后触发此函数。

仅在模态打开后加载图像

Only load images after modal is open

jquery

modal-dialog