javascript - 模态打开时触发延迟加载功能

Question

我正在使用延迟加载函数，该函数适用于除模态内部图像之外的所有图像。

当打开带有 .modal_image_container 类的 Bootstrap 模式时，我需要触发揭幕。

我正在尝试将延迟加载函数合并到 show.bs.modal 事件中。目前，它仅在单击的第一个模式上显示图像。

延迟加载函数(不是我的代码)

(function($) {

  $.fn.unveil = function(threshold, callback) {

    var $w = $(window),
        th = threshold || 0,
        retina = window.devicePixelRatio > 1,
        attrib = retina? "data-src-retina" : "data-src",
        images = this,
        loaded;

    this.one("unveil", function() {
      var source = this.getAttribute(attrib);
      source = source || this.getAttribute("data-src");
      if (source) {
        this.setAttribute("src", source);
        if (typeof callback === "function") callback.call(this);
      }
    });

    function unveil() {
      var inview = images.filter(function() {
        var $e = $(this);
        if ($e.is(":hidden")) return;

        var wt = $w.scrollTop(),
            wb = wt + $w.height(),
            et = $e.offset().top,
            eb = et + $e.height();

        return eb >= wt - th && et <= wb + th;
      });

      loaded = inview.trigger("unveil");
      images = images.not(loaded);
    }

    $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);

    unveil();

    return this;

  };

})(window.jQuery || window.Zepto);

调用延迟加载函数

$(document).ready(function lazyload() {
    $("img.lazy").unveil(300, function() {
      $(this).load(function() {
        this.style.opacity = 1;
      });
    });

});

我尝试将其调整为在模式打开时触发

$('[data-toggle="modal"]').on('show.bs.modal', function() {

        $("img.lazy").unveil(0,function() {

            console.log('test 1');

            $(this).load(function() {
                this.style.opacity = 1;
                });
            });
        });

三个模态之一，相同的类名，不同的 id(显然)。

<!-- MODAL Image Item 1 Pic 1 -->
<div id="140image" class="modal product_images_modal fade" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg modal_image_container">
        <div class="modal-content">

            <!-- Modal Header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">Close</span></button>
            </div>

            <!-- Product Modal Body --> 
            <div class="modal-body" data-dismiss="modal">

                <h2 class="modal-title heading">Title</h2>

                <img class="product_image_modal center-block lazy" src="/assets/images/products/blank_625.gif" data-src="/assets/images/products/140_900.jpg" alt="Large image of 140 litre Polypropylene Soakwell">
            </div>

            <!-- Modal Footer-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default close" aria-label="Close" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

最后是点击时打开模式的触发器

<!-- item image -->
            <img class="product_image lazy" data-toggle="modal" data-target="#140image" src="/assets/images/products/200.gif " alt="Geofabric" data-src="assets/images/products/600.jpg">

有人可以帮助我指出正确的方向吗？谢谢。

Answer 1

试试这个

$('.modal_image_container').on('shown.bs.modal', function() {
  $(this).find("img.lazy").unveil(0, function() {
    console.log('test 1');
    $(this).load(function() {
      this.style.opacity = 1;
    });
  });
});