1. Introdução de fundo
No aplicativo de álbum de fotos on -line, o mais simples dos usuários precisa visualizar fotos. Quando a rede é mais lenta, o tempo de espera para visualizar as fotos é relativamente longo e a experiência do usuário será muito ruim.
2. Situação atual
Existem duas maneiras principais de carregar fotos:
(1) A maneira mais original de carregar e exibir fotos diretamente na página HTML com a tag IMG. Esse método terá um processo de espera em branco quando a velocidade da rede for lenta ou as fotos a serem exibidas forem relativamente grandes e a experiência do usuário será ruim.
(2) Primeiro, use a tag IMG para carregar a miniatura da foto para exibir a foto na página HTML e, em seguida, use JavaScript para carregar a imagem original da foto oculta e aguarde até que a grande imagem da foto seja carregada antes de exibir a imagem original na página. A seguir, o fluxograma:
3. Nossa solução
Alguns dos métodos de otimização feitos recentemente pelo QQ Photo Album resolveram as deficiências dos dois métodos de apelação e atenderam às necessidades dos usuários para ver as fotos: veja a situação geral das fotos o mais rápido possível e veja a imagem original clara possível. Este método usa miniaturas e imagens originais para carregar e sobrepor simultaneamente. Primeiro, carregue as miniaturas e expanda a tela, e a imagem grande é sobreposta nas miniaturas e carrega simultaneamente. A miniatura é muito pequena e geralmente permite que os usuários vejam rapidamente a imagem embaçada. Durante o carregamento da imagem grande, a miniatura é gradualmente coberta de cima para baixo, para que o usuário possa ver a imagem grande durante o processo de carregamento.
(1) Exemplo de diagrama
Como mostrado acima, as etapas de processamento deste método são:
1). Obtenha o URL da miniatura da foto e da imagem original e obtenha o comprimento e a largura da foto;
2). Carregue e exiba as miniaturas da foto e estique as miniaturas de acordo com o comprimento e a largura do filme. Neste momento, o usuário vê um efeito embaçado;
3). Carregue e exiba a foto original, sobreponha a imagem original na miniatura para exibi -la. A imagem original será exibida tanto quanto carrega. Se não estiver carregado, ainda exibirá a miniatura. Gradualmente substitua a miniatura. Durante o processo de carregamento da imagem original, o usuário vê o efeito do gradiente da foto de Blur para limpar.
4). Depois que a imagem original é carregada, a imagem original substituiu as miniaturas e o usuário vê a imagem original real. Neste momento, você pode ocultar as miniaturas para impedir que as miniaturas interfiram na exibição de imagens com efeitos transparentes, como PNG ou GIF.
(2) Código de amostra
<!-Defina o tamanho da foto-> <div> <!-imagem pequena é exibida em tamanho grande-> <img src = "small_url"/> <!-A imagem original é sobreposta na imagem pequena-> <img src = "big_url"/> </div>
O acima é o conteúdo inteiro deste artigo. Para obter mais informações sobre JavaScript, você pode conferir: "Javascript Reference Tutorial" e "JavaScript Code Style Guide". Eu também espero que todos apoiem mais wulin.com.