如何在图像处于视口中时才加载图像？

我现在看到很多网站，主要是有大量图片的教程网站，只有在进入视图端口时才会在页面下方加载图像？

我该怎么做呢？

一个例子：

http://www.chopeh.com/blog/logo-design-start-to-finish/

向下滚动页面时，视口下方的图像会淡入

Answer 1

http://www.appelsiini.net/projects/lazyload
https://github.com/tuupola/jquery_lazyload

演示：
http://sofzh.miximages.com/javascript/myimage.png” /> $(document).ready(function(){ $(window).scroll(function(){ $(‘img[realsrc]’).each(function(i){ var t = $(this); if(t.position().top > ($(window).scrollTop()+$(window).height()){ t.attr(‘src’, t.attr(‘realsrc’)); // trigger the image load t.removeAttr(‘realsrc’); // so we only process this image once } }); }) });

Answer 2

不依赖于JQuery的简单解决方案：