php / Ajax - As melhores práticas para imagens de pré-carregamento

Question

Eu coloquei um script que é muito parecido com o recurso Galeria do Flickr. Duas miniaturas ao lado do outro, e quando você clicar nos links NEXT ou PREV as seguinte (ou anterior) duas imagens deslizam no. Cool!

Atualmente, quando a página é carregada ele carrega as duas imagens. A primeira vez nxt / PRV é usado, em seguida, as próximas duas imagens ou dois anteriores são carregados via ajax, com o ID da primeira imagem que está sendo passada na url eo HTML para as duas novas imagens retornados e exibidos via ajax.

bastante simples, mas que me levou a pensar, em uma conexão lenta, ou a carga do servidor pesado, então as duas imagens, embora relativamente pequenas miniaturas pode ainda demorar um pouco para carregar, e as coisas boas com painéis deslizantes é o fato de que os slides de dados ocultos em rapidamente e sem problemas preferbly sem um atraso de carregamento.

Então eu queria saber de um desempenho e bom ponto de prática de vista qual opção é melhor, isso é o que eu posso pensar por agora, aberto a sugestões.

1, ligue para cada conjunto de imagens via JSON (seu suposto ser rápido?)

2, carregar todas as imagens possíveis em um arquivo JSON e puxar os detalhes dessa forma - embora navegador ainda terá imagem de carga para. Além disso, por vezes, pode haver 4 imagens, outras vezes pode haver até 1000!

3, carga de 10 imagens via PHP em um arquivo JSON ou outro, e carregar todas as 10 imagens no navegador escondendo a 8, que não estão no show, e sempre mostrando os dois meio. Problema aqui é que cada vez que alguém clica, o arquivo tem de recarregar as primeiras e últimas imagens, que ainda ocupa tempo, embora eu suponho que as imagens médio terá sido armazenado em cache através do browser por agora embora. Mas ainda há um tempo de carregamento.

4, é possível ter uma imagem JSON com todos os detalhes da imagem (independentemente de números) e não usar 3 acima para carregar 10 dessas imagens, é possível usar ajax para somente leitura 10 linhas e manter um ponteiro do último lia-se, portanto, o arquivo JSON pode ser carregado rápido, curto de atualização e as imagens de cada lado são armazenados em cache pelo navegador !!

Hope isso é claro, alguma sugestão sobre como você lida com isso?

Answer 1

Para pré-carregar uma imagem do Javascript, você não precisa fazer nada que soa como AJAX ou JSON. Tudo que você precisa é o seguinte:

var img = new Image();
img.src = "http://example.com/new/image.jpg";

O navegador completamente feliz carregar a imagem em segundo plano, mesmo que ele não é exibido em qualquer lugar. Então, quando você atualizar o campo src de outro (exibido) tag de imagem, o navegador irá mostrar imediatamente a parte da imagem que já está carregado (espero tudo isso).

Answer 2

Buscando JSON Via Ajax só vai te atrapalhar.

Você é melhor fora de usar em linha JSON e gerou Javascript.

 <?php 
       $images = array( "foo.jpg","bar.jpg" ); 
 ?>
 <script type="text/javascript">
   jQuery(function($){
       var images = ( <?php echo json_encode($images); ?> ); 
       /* Creating A Hidden box to preload the images into */
       var imgbox = document.createElement("div"); 
       $(imgbox).css({display: 'none'});
       /* Possible Alternative trick */
       /* $(imgbox).css({height:1px; width: 1px; overflow: hidden;}); */
       $('body').append(imgbox);

       $.each( images , function( ind, item ) 
       {
          #Injecting images into the bottom hidden div. 
          var img = document.createElement("img"); 
          $(img).src("/some/prefix/" + item ); 
          $(imgbox).append(img);
       });
    }); 
 </script>

Answer 3

No caso em que você deseja simultaneamente pré-carga um maior número de recursos, um pouco de ajax pode resolver o problema para você. Apenas certifique-se os cabeçalhos de cache são tais que o navegador irá utilizar os recursos na próxima solicitação. No exemplo a seguir, eu carregar até quatro recursos ao mesmo tempo.

<script>
var urls = [
  "a.png",
  "b.png",
  "c.png",
  "d.png",
  "e.png",
  "f.png"
];

var currentStep = 0;
function loadResources()
{
  if(currentStep<urls.length){
  var url = urls[currentStep];
  var req = GetXmlHttpObject();
  update('loading ' + url);
  req.open("GET", url, true);
  req.onreadystatechange = getUpdateState(req, url);
  req.send(null);
} else {
  window.location = 'done.htm';
}
}

function getUpdateState(req, url) {
  return function() {
    var state = req.readyState;
    if (state != 4) { return; }
    req = null;
    setTimeout('loadResources()', 0);
  }
}
</script>

<!-- This will queue up to four concurrent requests.  Modern browsers will request up to eight images at time  -->
<body onload="javascript: loadResources(); loadResources(); loadResources(); loadResources();">

Answer 4

Por que não usar texto e substituir o texto com um código de imagem (trabalhos em php muito bom com o Ajax até 500 fotos e mais)?