0

Estou com uma página de galeria em shadow box com um código de lazy load "funcionando" nas imagens que aparecem dentro do shadow box (o preload carrega tudo, exceto as imagens de dentro do shadow box que estão com o lazy load)

o problema é que o trigger do load se dá via scroll: quando se clica na miniatura da galeria, o shadow box abre e a imagem não carrega. ela só carrega se vc der um leve scroll na página. (diminuir a janela para 1440x900 ou menos pra conferir o "bug")

imagino que seja necessário uma mudança de parâmetro, mas não sei qual. Os loads individuais têm que agir mediante cada requisição de imagem, seja clicando na miniatura, seja clicando em anterior/próxima

o código como está Pastebin

    <script>
/*! Lazy Load 1.9.1 - MIT license - Copyright 2010-2013 Mika Tuupola */
!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("appear")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);
</script>
<script>
$( document ).ready(function() {   
    $("img.lazy").lazyload({
        threshold : 50,
        skip_invisible : true
    });

    $('img.lazy').on('appear',function(){
        $(this).hide().fadeIn(1000);
    });

});
</script>

E o link da página teste com o bug: Arthurnunes Fotografia

1
  • 1
    Posta o código aqui, facilite a vida de quem for te ajudar a nao ter que acessar um site externo pra ter que ver seu código
    – user28595
    Commented 17/08/2017 às 2:27

1 Resposta 1

0

Adicione a linha abaixo no código após a abertura da imagem:

$(".container img.lazy").lazyload();$(window).scroll();

Complicado achar no plugin onde isso é feito. Então adicione o código abaixo no JavaScript da página:

$(function(){$(".Thumb").on("click",function(){ $(".container img.lazy").lazyload();$(window).scroll(); });});

Desta forma, quando a imagem grande for aberta, irá invocar o Lazy Load e chamar o evento scroll na janela.

Atualizando o código para quando pressionado as teclas de setas no teclado:

$(function(){$(".Thumb, .PamphletNextButton, .PamphletPrevButton").add(window).on("click keydown",function(){ $(".container img.lazy").lazyload();$(window).scroll(); });});
4
  • Muuuuuuuuuuito bom!!! resolveu 100% Muito Obrigado David!!! Commented 18/08/2017 às 17:18
  • Legal cara! Depois marque a resposta como a certa. Obg!
    – Sam
    Commented 18/08/2017 às 19:03
  • Eu tinha esquecido de marcar como certa, foi mal! eu vi que conseguiu invocar as ações perfeitamente para dar a funcionalidade necessária! sou muito grato! Na versão mobile porém, tbm existe o Swipe. será que teria como fazer uma linha voltada pra isso? segue link de testes com seu fix arthurnunesfotografia.com/2.2/phone/aniversario-original.htm‌​l se acessar via celular ou via emulação móvel do devtools do chrome, vai ver que o swipe não faz carregar Commented 4/09/2017 às 22:07
  • @ArthurNunes Não consegui abrir o link. Deu página não encontrada.
    – Sam
    Commented 4/09/2017 às 22:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .