Make images load when they enter visible section of browser? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to a开发者_StackOverflow社区ttract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.

Closed 8 years ago.

Improve this question

I was browsing around the web and I saw something I've never seen before. on this site: http://blogof.francescomugnai.com/2009/04/mega-roundup-of-geektool-scripts-inspiration-gallery/

When you navigate down the page, the images only load when they are in the visible portion of the browser. I have never seen this before and was wondering if anyone else has and how exactly one would do it.

I'm guessing this is some sort of Wordpress plugin (that's what he's using) but I'm not sure. Is it javascript? Are they actually loading on page load but just become visible later for a "snazzy" effect or is this actually useful for quicker page load times?

---

"wp-content/plugins/jquery-image-lazy-loading"

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.

Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

http://www.appelsiini.net/projects/lazyload

So it seems it goes through every image specified or inside of the context of an element and replaces the src with a placeholder gif before the images fully load, saves the original URI and when the image is "visible" it replaces the placeholder with the real image.

---

LazyLoad is no longer available according to the website. Apparently the code no longer works on new browsers and the author doesn't have time to update it.

The "appear" plug in is working well for me.

http://plugins.jquery.com/appear/

It allows you to specify a callback function for an element. The callback function is called when the element appears into view. From the site:

$('#foo').appear(function() {
  $(this).text('Hello world');
});

---

If you look at the source of the page you referenced, it contains this bit of code:

jQuery(document).ready(function($){
  jQuery(".SC img").lazyload({
    effect:"fadeIn",
    placeholder: "http://blogof.francescomugnai.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif"
  });
});

I suspect that's how they're accomplishing the effect. It uses the jQuery LazyLoad plugin, which can be found here:

http://www.appelsiini.net/projects/lazyload

---

As Sanjay pointed out, the jQuery LazyLoad plugin from Applesiini no longer works. Here is another jQuery plugin that I found. Just another option in addition to jQuery Appear.

http://plugins.jquery.com/project/LazyLoadOnScroll

http://ivorycity.com/blog/2011/04/19/jquery-lazy-loader-load-html-and-images-on-scroll/