ленивый нагрузки не работает со скрытыми элементами

Question

это мой простой тестовый код для ленивых нагрузки

http://codepen.io/kevkev/pen/bVVGdE

он работает до сих пор .. но дело в том, что скрытые изображения в функции OnClick для кнопки и т.д. Doesnt Работа! (просмотрите мой код и прокрутите до конца и нажмите кнопку)

Вы можете видеть в сети обратную связь, что она уже загрузила изображения.

я мог понять, что эта проблема не является "дисплей: нет"

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

Answer 1

спасибо, ребята! но я также получил рабочее решение по этому вопросу:

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

Answer 2

Поскольку дисплей: нет; элементы неизвестны в позиции. И lazyloader не знает, когда и если вы измените это. Поэтому он решает с нетерпением его загрузить. Если вы хотите, чтобы lazyloader автоматически обнаружил это, используйте https://github.com/aFarkas/lazysizes/.

Answer 3

В качестве альтернативы я бы порекомендовал justlazy, потому что он более легкий и 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 .. 
 
});