我正在使用延迟加载函数,该函数适用于除模态内部的所有图像。
当打开类.modal_image_container
的Bootstrap模态时,我需要触发揭幕。
我正在尝试将lazyload函数合并到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;
});
});
});
三个模态中的一个,相同的类名,diff 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">
有人可以协助我指出正确的方向吗?感谢。
答案 0 :(得分: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;
});
});
});