Tenho notado isso em vários sites "modernos" (por exemplo, Facebook e pesquisa de imagens do Google), onde as imagens abaixo da dobra carregam apenas quando o usuário rola a página para baixo o suficiente para trazê-los para dentro da região da janela de visualização visível ( na fonte de exibição, a página mostra Número X de <img>tags, mas eles não são obtidos do servidor imediatamente ). Como é chamada essa técnica, como funciona e em quantos navegadores ela funciona. E existe um plugin jQuery que pode atingir esse comportamento com codificação mínima.

Editar

Bônus: alguém pode explicar se existe um "onScrolledIntoView" ou evento semelhante para elementos HTML. Se não, como esses plug-ins funcionam?

Algumas das respostas aqui são para página infinita. O que Salman está pedindo é o carregamento lento de imagens.

Plugar

Demo

EDIT: Como funcionam esses plug-ins?

Esta é uma explicação simplificada:

1. Encontre o tamanho da janela e encontre a posição de todas as imagens e seus tamanhos
2. Se a imagem não estiver dentro do tamanho da janela, substitua-a por um marcador de posição do mesmo tamanho
3. Quando o usuário rola para baixo e a posição da imagem <rolar + altura da janela, a imagem é carregada

Dave Artz da AOL deu uma ótima palestra sobre otimização na jQuery Conference Boston no ano passado. AOL usa uma ferramenta chamada Sonar para carregamento sob demanda com base na posição de rolagem. Verifique no código os detalhes de como ele compara scrollTop (e outros) ao deslocamento do elemento para detectar se parte ou todo o elemento está visível.

jQuery Sonar

Dave fala sobre o Sonar nesses slides . O sonar começa no slide 46, enquanto a discussão geral sobre "carga sob demanda" começa no slide 33.

Eu vim com meu próprio método básico que parece funcionar bem (até agora). Provavelmente, há uma dúzia de coisas que alguns dos scripts populares abordam nas quais não pensei.

Observação - esta solução é rápida e fácil de implementar, mas obviamente não é ótima para desempenho. Definitivamente, olhe para o novo Intersection Observer, conforme mencionado por Apoorv e explicado por developers.google se o desempenho for um problema.

O JQuery

$(window).scroll(function() {
    $.each($('img'), function() {
        if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
            var source = $(this).data('src');
            $(this).attr('src', source);
            $(this).removeAttr('data-src');
        }
    })
})

Amostra de código html

<div>
    <img src="" data-src="pathtoyour/image1.jpg">
    <img src="" data-src="pathtoyour/image2.jpg">
    <img src="" data-src="pathtoyour/image3.jpg">
</div>

Explicado

Quando a página é rolada, cada imagem na página é verificada.

$(this).attr('data-src') - se a imagem tiver o atributo data-src

e a que distância essas imagens estão da parte inferior da janela.

$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)

ajuste + 100 para o que quiser (- 100 por exemplo)

var source = $(this).data('src');- obtém o valor de data-src=também conhecido como o url da imagem

$(this).attr('src', source); - coloca esse valor no src=

$(this).removeAttr('data-src'); - remove o atributo data-src (para que seu navegador não desperdice recursos mexendo com as imagens que já foram carregadas)

Adicionando ao Código Existente

Para converter seu html, em um editor, basta pesquisar e substituir src="porsrc="" data-src="

Existe um plugin de rolagem infinita muito bom aqui

Eu mesmo nunca programei um, mas imagino que seja assim que funciona.

1. Um evento está vinculado à rolagem da janela

   $(window).scroll(myInfinteScrollFunction);

2. A função chamada verifica se o topo da rolagem é maior que o tamanho da janela

   function myInfiniteScrollFunction() {  
       if($(window).scrollTop() == $(window).height())  
       makeAjaxRequest();  
   }

3. Uma solicitação AJAX é feita, especificando em qual resultado # começar, quantos obter e quaisquer outros parâmetros necessários para a extração de dados.

   $.ajax({
       type: "POST",
       url:  "myAjaxFile.php",
       data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
       success: myInfiniteLoadFunction(msg)
   });

4. O ajax retorna algum conteúdo (provavelmente formatado em JSON) e os passa para a função loadnig.

Espero que isso faça sentido.

O carregamento lento de imagens anexando listener a eventos de rolagem ou usando setInterval é altamente sem desempenho, pois cada chamada para getBoundingClientRect () força o navegador a refazer o layout de toda a página e introduzirá considerável confusão em seu site.

Use Lozad.js (apenas 569 bytes sem dependências), que usa IntersectionObserver para carregar lentamente as imagens com desempenho.

O canivete suíço de carregamento lento de imagens é o ImageLoader da YUI .

Porque esse problema é mais do que simplesmente observar a posição de rolagem.

Demonstração deste link funciona para mim

1. Carregue o plugin jQuery loadScroll após a biblioteca jQuery, mas antes da tag de fechamento do corpo.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="jQuery.loadScroll.js"></script>

2. Adicione as imagens em sua página da web usando o atributo Html5 data-src. Você também pode inserir marcadores de posição usando o atributo src do img regular.

<img data-src="1.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="2.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="3.jpg" src="Placeholder.jpg" alt="Image Alt">

3. Chame o plugin nas tags img e especifique a duração do efeito fadeIn conforme suas imagens são exibidas

$('img').loadScroll(500); // in ms

Estou usando o jQuery Lazy . Levei cerca de 10 minutos para testar e uma ou duas horas para adicionar à maioria dos links de imagem em um dos meus sites ( CollegeCarePackages.com ). Não tenho nenhum relacionamento (nenhum / zero) de qualquer tipo com o desenvolvedor, mas isso me economizou muito tempo e basicamente ajudou a melhorar nossa taxa de rejeição para usuários de celular e eu agradeço isso.