0

I use jquery lazyload plugin for my website. But It just lazyloads images. I want to make something like that, complete div will be lazyloaded effect. And all contents will show altogether, not just image. This features we can see on Facebook apps and desktop version. How can I do it using javascript or jquery ?

Here's my Code:

<style type="text/css">
.lazyload {
background:#f3f3f3;
padding:10px;
margin:10px;
border-radius:6px;
}
.lazyload img{border-radius:6px;}
</style>

<div class="lazyload">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEgT2riAqvy_1iVAA3tKeG1JkTKnBA2g4lFQ&usqp=CAU" width="100%">
<h2> A Post Title </h2>
<p> Lprem ipsum dolor. This is a simple dummy text </p>
</div>

How can I do it....?

Md. Ibrahim
  • 147
  • 7
  • You listen to scroll event to determine when the element is in view ([here's an example SO question](https://stackoverflow.com/questions/16125186/jquery-trigger-function-only-one-time-per-when-an-element-becomes-visible-on-pa) then make an ajax call to load the content. The content shouldn't be "pre-loaded" as in your code if you want "lazyload" (or, more specifically "late-load"). If the html is already in the page, then listen on scroll again and just .fadeIn() the content. – freedomn-m Feb 28 '23 at 19:13
  • @freedomn-m did you see how Facebook content loads lazily....? A shine effect. And appears if It's loaded properly. I wanted something like that brother .. – Md. Ibrahim Feb 28 '23 at 19:19
  • That'll likely be some css sugar - get it working technically first, then add some fancy animations if needed. If you want to exactly like facebook, then you'll have to reverse engineer how they do it (or send them an email to ask for the code...) – freedomn-m Feb 28 '23 at 19:21

0 Answers0