Taobao Image Processing Discussão
A página de Taobao é muito grande, mas abre muito rapidamente. O processamento da imagem usa carregamento de rolagem, o que significa onde o eixo de rolagem rola e onde a imagem é carregada. Mas se você quiser verificar seu código -fonte, será necessário muito esforço, porque a compactação e a fusão de código são bem feitas! Como a imagem é carregada na rolagem e a imagem não é carregada durante a inicialização, quando você atualiza a página na parte inferior da página, a página inferior geralmente não será carregada. A abordagem de Taobao parece ser (porque eu não olhei para o código -fonte deles, apenas com base nas operações), refrescante para trazer a página de volta ao topo.
Imite o Taobao e faça fotos de rolagem para carregar
Aqui estão três maneiras de pensar:
1. JavaScript Lazy Carreging Visual Area Carregando
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> harooms front-end blog-visual área carregando javascript </title> <yoy> img {width: 100%; margin-bottom: 30px; Min-altura: 400px; background-color: #ddd;} </style></head><body> <img haroomslazyload="Chrysanthemum.jpg" src="" > <img haroomslazyload="Desert.jpg" src="" > <img haroomslazyload="Desert.jpg" src="" > <img haroomslazyload="Hydrangeas.jpg" src = ""> <img haroomslazyload = "koala.jpg" src = ""> <img haroomslazyload = "Lighthouse.jpg" src = ""> <img haroomslazyload = "penguins.jpg" src = ""> <Img HaroomslazyRload = "Tuls.jpg" src = ""> <img haroomslazyRload = " Imgnum = document.getElementsByTagName ('img'). Length; var imgobj = document.getElementsByTagName ("img"); var L = 0; window.onscroll = function () {var vereHeight = document.documentElement.clientHeight; var scrolltop = document.documentElement.scrolltop || document.body.scrolltop; for (var i = l; i <imgnum; i ++) {if (imgobj [i] .offsetTop <SeeHeight+scrolltop) {console.log (imgobj [i] .getAttribute ("src")); console.log (imgobj [i] .src); if (imgobj [i] .getAttribute ("src") == "") {imgobj [i] .src = imgobj [i] .getAttribute ("haoroomslazyload"); }} if (imgobj [i] .offSettop> SeeHeight + scrolltop) {l = i; quebrar; }}}} </script>Por favor, preste atenção às minhas duas saídas de console, console.log (imgobj [i] .src); Para obter todo o endereço do navegador!
2. JQuery Lazy Carreging Visual Area Carregando
O JS acima é traduzido com jQuery!
var L = 0 // JS Versão de tradução do método $ (janela) .bind ("scroll", function (event) {for (var i = l; i <$ ("img"). length; i ++) {if ($ ("img"). eq (i) .offset (). top <parseint ($ (window). if ($ ("img"). Eq (i) .attr ("src") == "") {var lazyloadsrc = $ ('img'). if ($ ("img"). Eq (i) .offset (). Top> parseint ($ (janela) .Height ()) + parseint ($ (janela) .scrolltop ())) {l = i;3. Extensão de carregamento de área visual
Por exemplo, um efeito de animação ou uma imagem de tela, o efeito que quero alcançar é que ela não carrega inicialmente. Ao rolar para a animação ou gráfico, ela será carregada. Em seguida, podemos fazer as seguintes melhorias com base no código acima:
$ (janela) .bind ("roll", function (event) {// a altura da janela + a altura do topo invisível = a altura da parte inferior da tela da parte superior var thisButtomtop = parseInt ($ (window) .Height ()) + parseint ($ (window) .Scrolltop ()); A parte superior da tela da parte superior var picturetop = parseint ($ (janela) .offset (). topo); Sua função de carregamento aqui e a função de carregamento será movida do documento original.Atualize de volta ao topo
Quando fazemos o carregamento da área visual, geralmente deixamos que ela volte novamente ao topo. Como Taobao. Atualize de volta ao topo.
Não sei como o Taobao faz isso. Atualize de volta ao topo, usei o evento OnBeFeNload.
Os eventos do OnBeForeUnLoad e Onunload, Onunload e OnBeforeUnload são chamados ao refrescar ou fechar. Eles podem ser especificados no script <script> através da janela.onunload ou no <body>. A diferença é que o OnBeSeunload é executado antes do OnUnload, também pode impedir a execução do OnUnload.
OnBeforeUnload também é chamado quando a página é atualizada ou fechada. OnBeforeUnload é chamado quando está prestes a ir ao servidor para ler uma nova página, mas ainda não começou a lê -la. O Onunload leu a nova página que precisa ser carregada no servidor e é chamada quando a página atual está prestes a ser substituída. OnUnload não pode impedir as atualizações e fechamentos de páginas. E o OnBeforeUnload pode fazer isso.
1. Somente o Onload é executado quando a página é carregada
2. Quando a página é fechada, execute o número de carga primeiro e, finalmente, OnUnload
3. Ao atualizar a página, execute primeiro o número de carga, depois o OnUnload e, finalmente, o Onload.
Refrescante para o topo é usar este evento, você pode escrever assim.
window.onBeforeUnload = function () {$ (Window) .Scrolltop (0);}Quando todas as fotos do site são usadas, mas a área é carregada e o CSS e o JS são mesclados e compactados, a velocidade e o desempenho do nosso site serão muito aprimorados!
Se você quiser fazer isso como o Taobao, pode melhorar o código.
De fato, a idéia de atraso no carregamento é colocar a imagem em um Data-SRC ou uma propriedade em primeiro lugar. Quando a página deslizar para a área visual, atribua o endereço de imagem armazenado ao SRC.
Não vou listar o código aqui.