geben Alarm nach Belastung faul

Question

Ich benutze lazySizes jquery plugin und ich möchte eine Warnung haben, wenn meine faulen geladen wie kann ich für meine alle geladenen Inhalte tun? Ich möchte für meine Ajax-Inhalt tun, wenn ich alert habe ich denke, kann ich umgehen, was ich

body { 
 
    padding: 30px; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
.teaser.lazyload { 
 
    opacity: 0; 
 
    transform: scale(0.8); 
 
} 
 
.teaser.lazyloaded { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    transition: all 700ms; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="teaser lazyload" data-expand="-120"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur 
 
    ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit 
 
    minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 
<div class="teaser lazyload" data-expand="-120"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur 
 
    ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit 
 
    minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 

 
<div class="teaser lazyload" data-expand="-120"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur 
 
    ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit 
 
    minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 

 
<div class="teaser lazyload" data-expand="-220"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur 
 
    ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit 
 
    minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 

 
<div class="teaser lazyload" data-expand="-220"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur 
 
    ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit 
 
    minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script>

click to see codepen

Answer 1

Das Plugin dies nicht sehr gut dokumentiert, aber es gibt mehrere Ereignisse durch sie abgefeuert werden, nämlich lazybeforeunveil, lazybeforesizes und lazyunveilread. Ich bin über die genaue Reihenfolge nicht sicher, aber Sie können binden an lazyunveilread, um zu erreichen, was Sie wollen:

$('.teaser.lazyload').on('lazyunveilread', function(ev) { 
 
    alert("foo!"); 
 
    console.log(ev.target); // <-- that's how you can get the element that has been loaded 
 
});

@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"; 
 
    
 
    body{ 
 
    padding:30px; 
 
    width:80%; 
 
    margin:0 auto; 
 
} 
 
.teaser.lazyload { 
 
\t opacity: 0; 
 
\t transform: scale(0.8); 
 
} 
 

 
.teaser.lazyloaded { 
 
\t opacity: 1; 
 
\t transform: scale(1); 
 
\t transition: all 700ms; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script> 
 
<div class="teaser lazyload" data-expand="-120"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 
<div class="teaser lazyload" data-expand="-120"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 

 
<div class="teaser lazyload" data-expand="-120"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 

 
<div class="teaser lazyload" data-expand="-220"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div> 
 

 

 
<div class="teaser lazyload" data-expand="-220"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p> 
 
    <h1>Teaser Title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p> 
 
</div>

Answer 2

Ich denke, tun möchten Sie JQuery verwenden können „blättern () "um zu prüfen, ob die Seite komplett durchgescrollt ist, da, soweit ich weiß, das Lazyloading funktioniert, wenn wir die Seite scrollen, so dass Sie erfassen müssen, dass Sie sich am Ende der Seite befinden, um eine Warnung anzuzeigen.

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
    alert("Bottom Of the Page"); 
    } 
}); 

Bitte markieren und wählen, wenn die Lösung sinnvoll ist.

Vielen Dank!

Answer 3

Lazysizes müssen nicht ein expliziten Ereignishandler müssen wissen, wann die lazyload ist erledigt. Du brauchst es auch nicht. Im Allgemeinen benötigen Sie nur lazybeforeunveil, um die Transformation oder den Ladevorgang zu ändern, wenn das Bild geladen wird.

Unter bestimmten Umständen könnten Sie setImmediate/setTimeout in einem LazyBeforeunveil verwenden.

$(document).on('lazybeforeunveil', function(){ 
    //do your stuff.. (setTimeout if required) 
}); 

Es ist ziemlich konsistent. hoffe, es hilft