延迟加载不适用于隐藏元素

Question

这是我的懒加载简单测试代码

它到目前为止有效..但问题是按钮等的 onclick 函数中的隐藏图像不起作用！（观看我的代码并滚动到结束并按下按钮）

可以看到网络反馈已经加载图片了

我可以看出问题是 "display:none"

.pop {
 display:none;
 z-index:99;
 position:absolute;
 width:100%;
 height:auto;
 background:inherit;
    }

Answer 1

因为显示：none；元素的位置未知。并且 lazyloader 不知道，何时以及是否更改它。因此它决定急于加载它。如果你想要一个自动检测这个的 lazyloader 使用 https://github.com/aFarkas/lazysizes/.

Answer 2

作为替代方案，我建议 justlazy, because it's more lightweight and don't uses jQuery。

1. 定义占位符（与您所做的类似）：

<span data-src="path/to/image" data-alt="alt" data-title="title"
      class="placeholder">
</span>

2. 单击按钮后初始化延迟加载：

 $(document).ready(function () {
     $("#art").click(function () {
       $("#art_pop").fadeIn(300);

       Justlazy.registerLazyLoadByClass("placeholder", {
           // image will be loaded if it is 300 pixels
           // below the lower display border
           threshold: 300
       });
     });

     // other code ..
 });

Answer 3

谢谢大家！但我也得到了一个可行的解决方案：

http://codepen.io/kevkev/full/meebpQ/

 $(document).ready(function () {
 $("#art").click(function () {
 $("#art_pop").fadeIn(300);
 });

 $(".pop > span, .pop").click(function () {
     $(".pop").fadeOut(600);
 });
 });


;(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);



/*      OWN JAVASCRIPT         */

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

延迟加载不适用于隐藏元素

lazy load doesnt work with hidden elements

image

button

lazy-loading

hidden

lazy-evaluation