Load (Lazy Loading) a Div whenever the DIV gets visible for the first time

问题:

I want to enable a lazy loading for the contents of my website.

Just like Jquery Image loading http://www.appelsiini.net/projects/lazyload that is valid only for images.

I want to do it for the content (DIV's).

Suppose we have a long page then i want to download the div as they becomes visible.

I will download the content using JSON or PageMethods. But i want the code that will execute the function for loading contents.

So whether we can somehow find this that div is visible only scrolling down.

Means i need to use some scroll events but dont know how.

Any help is appreciated.

回答1:

Code below does not include the case with moving from the bottom (read patrick's comment below). Also it alows multiple event execution, due to several concurent onscroll events (in most browsers you won't see that most of the time).

$(document).ready(function(){     $(window).scroll(function() {         //check if your div is visible to user         // CODE ONLY CHECKS VISIBILITY FROM TOP OF THE PAGE         if ($(window).scrollTop() + $(window).height() >= $('#your_element').offset().top) {             if(!$('#your_element').attr('loaded')) {                 //not in ajax.success due to multiple sroll events                 $('#your_element').attr('loaded', true);                  //ajax goes here                 //by theory, this code still may be called several times             }         }     }); });

Proper solution, that takes into consideration scrolling from bottom here.

回答2:

I was looking for this to load advertising from my openX server only when the advertising should be visible. I'm using the iFrame version of openX which is loaded in a div. The answer here put me on my way to solving this problem, but the posted solution is a bit too simple. First of all, when the page is not loaded from the top (in case the user enters the page by clicking 'back') none of the divs are loaded. So you'll need something like this:

$(document).ready(function(){    $(window).scroll(lazyload);    lazyload(); });

also, you'll need to know what defines a visible div. That can be a div that's fully visible or partially visible. If the bottom of the object is greater or equal to the top of the window AND the top of the object is smaller or equal to the bottom of the window it should be visible (or in this case: loaded). Your function lazyload may look like this:

function lazyload(){    var wt = $(window).scrollTop();    //* top of the window    var wb = wt + $(window).height();  //* bottom of the window     $(".ads").each(function(){       var ot = $(this).offset().top;  //* top of object (i.e. advertising div)       var ob = ot + $(this).height(); //* bottom of object        if(!$(this).attr("loaded") && wt<=ob && wb >= ot){          $(this).html("here goes the iframe definition");          $(this).attr("loaded",true);       }    }); }

Tested on all major browsers and even on my iPhone, works like a charm!!

回答3:

You may consider way point library :)

http://imakewebthings.com/waypoints/api/waypoint/

Its use cases and api's are defined in above link

It is of 9 kb when compressed. It will add an additional -100 ms- 50ms timelag while loading page on 3g/ 4g

Edit :- It can be used standalone and it also supports all major frameworks.

回答4:

Here is a solution that lazy loads images when they come within 500px of view. It can be adapted to load other types of content. The images themselves have an attribute data-lazy="http://..." with the image url in it, and then we just put a dummy transparent image for the src attribute.

var pixelLoadOffset = 500; var debouncedScroll = debounce(function () {     var els = app.getSelector(el, 'img[data-lazy]');     if (!els.length) {         $(window).unbind('scroll', debouncedScroll);         return;     }     var wt = $(window).scrollTop();    //* top of the window     var wb = wt + $(window).height();  //* bottom of the window      els.each(function () {         var $this = $(this);         var ot = $this.offset().top;  //* top of object         var ob = ot + $this.height(); //* bottom of object         if (wt <= ob