1

I have used http://www.appelsiini.net/projects/lazyload this plugin to load the images.

It works fine when I scroll down the page images are loading but I need to display first row images when page is loaded.

How can I do this?

3 Answers 3

2

By default images are loaded when they appear on the screen. If you want images to load earlier you can set threshold parameter. Setting threshold to 200 causes image to load 200 pixels before it is visible.

$("img.lazy").lazyload({ threshold : 200 });

So in your case, how far is the first row down the page?

$(function() {
    var $firstRow = $('table:first tr:first'), 
    threshold = $firstRow.offset().top + $firstRow.height();
    $("img.lazy").lazyload({ threshold : threshold });
});

or something like that.

4
  • after using threshold : 200 it wont display images for my visible area. Is there any other way to do this?
    – absolutek
    Sep 26, 2012 at 6:21
  • You are taking things too literally. How far down the page are they? You can do this by using the second approach, a selector to get the top location. Sep 26, 2012 at 15:56
  • sorry, actually I asked wrong question, I want to know what is threshold is it height of container or anything else?
    – absolutek
    Sep 27, 2012 at 7:42
  • @absolutek I added an example that might help you more. It finds the firstRow of the first table, gets the top and height then sets the threshold so it will show that first row. Sep 27, 2012 at 21:05
0

In Web site demo page running , is display first row with page is load see this DEMO

$(function() {
          $("img").lazyload({
              effect : "fadeIn",
              /*
              appear : function(elements_left, settings) {
                  console.log("appear");
                  console.log(elements_left);
                  //console.log(this, elements_left, settings);
              },
              load : function(elements_left, settings) {
                  console.log("load");
                  console.log(elements_left);
                  //console.log(this, elements_left, settings);
              }
              */
          });
      });​
0

Your images are missing width and height attributes. Lazy Load wont work properly without them. Without knowing width and height browser cannot know where images are supposed to be in the layout when document.ready event fires. Proper image tag looks something like following:

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.