As imagens de pré -carregamento são uma ótima maneira de melhorar sua experiência do usuário. As imagens são pré -carregadas no navegador e os visitantes podem surfar no seu site sem problemas e desfrutar de velocidades de carga extremamente rápidas. Isso é muito benéfico para galerias e sites de imagens, onde as imagens representam uma grande proporção. Ele garante que as imagens sejam publicadas de maneira rápida e sem problemas e também podem ajudar os usuários a obter uma melhor experiência do usuário ao navegar no conteúdo do seu site. Este artigo compartilhará três tecnologias de pré -carregamento diferentes para aprimorar o desempenho e a usabilidade do site.
Método 1: Use CSS e JavaScript para implementar a pré -carga
Existem muitas maneiras de implementar imagens de pré -carregamento, incluindo o uso de CSS, JavaScript e várias combinações dos dois. Essas tecnologias podem projetar soluções correspondentes de acordo com diferentes cenários de design, que são muito eficientes.
O uso de CSS sozinho pode pré -carregar com facilidade e eficiência imagens, e o código é o seguinte:
A cópia do código é a seguinte:
#pré -ad-01 {background: url (http: //domain.tld/image-01.png) no-repeat -9999px -9999px; }
#pré -ad-02 {background: url (http: //domain.tld/image-02.png) no-repeat -9999px -9999px; }
#pré -ad-03 {background: url (http: //domain.tld/image-03.png) no-repeat -9999px -9999px; }
Ao aplicar esses três seletores de ID ao elemento HTML (x), podemos pré-carregar a imagem no plano de fundo fora da tela através da propriedade em segundo plano do CSS. Enquanto os caminhos dessas imagens permanecerem os mesmos, o navegador usa imagens pré -carregadas (cache) durante a renderização quando são chamadas em outro lugar na página da web. Simples, eficiente e não requer nenhum JavaScript.
Embora esse método seja eficiente, há espaço para melhorias. As imagens carregadas usando esse método são carregadas juntamente com outros conteúdos da página, aumentando o tempo geral de carregamento da página. Para resolver esse problema, adicionamos algum código JavaScript para adiar o tempo de pré -carga até que a página seja carregada. O código é o seguinte:
A cópia do código é a seguinte:
// melhor imagem pré-carregamento @ <a href = "http://perishable.com/press/2009/12/28/3-ways-preload-images-css-javasccript-ajax/"> http://perishable/press/2009/12/28/ways-prp://perishable/press/2009/12/28/30 function preloader () {
if (document.getElementById) {
Document.getElementById ("Preload-01"). style.background = "URL (http: //domain.tld/image-01.png) no-repeat -9999px -9999px";
Document.getElementById ("Preload-02"). style.background = "url (http: //domain.tld/image-02.png) no-repeat -9999px -9999px";
Document.getElementById ("Preload-03"). style.background = "URL (http: //domain.tld/image-03.png) no-repeat -9999px -9999px";
}
}
função addloadevent (func) {
var OldOnLload = Window.OnLload;
if (typeof window.onload! = 'function') {
window.onload = func;
} outro {
window.onload = function () {
if (Oldonload) {
OldonLoad ();
}
func ();
}
}
}
addLaadevent (pré -adicionador);
Na primeira parte do script, pegamos o elemento usando o seletor de classe e definimos a propriedade em segundo plano para pré -carregar imagens diferentes.
Na segunda parte deste script, usamos a função addLaadevent () para atrasar o tempo de carregamento da função Preloader () até que a página seja carregada.
O que acontece se o JavaScript não funcionar corretamente no navegador do usuário? É muito simples. A imagem não será pré -carregada. Quando a página chamar a imagem, ela será exibida normalmente.
Método 2: Use apenas JavaScript para implementar a pré -carga
O método acima às vezes é muito eficiente, mas gradualmente descobrimos que leva muito tempo na implementação real. Em vez disso, prefiro usar javascript puro para pré -carregar imagens. Dois desses métodos de pré -carregamento são fornecidos abaixo, que podem funcionar lindamente em todos os navegadores modernos.
Javascript Code Segment 1
É fácil de implementar simplesmente editar e carregar o caminho e o nome da imagem necessária:
A cópia do código é a seguinte:
<div>
<script type = "text/javascript">
<!-//-> <! [CDATA [//> <!-var Images = new Array ()
function preload () {
for (i = 0; i <prelOad.argudents.length; i ++) {
imagens [i] = nova imagem ()
imagens [i] .src = pré -ad.arguments [i]
}
}
pré -carga (
"http: //domain.tld/gallery/image-001.jpg",
"http: //domain.tld/gallery/image-002.jpg",
"http: //domain.tld/gallery/image-003.jpg"
)
//-> <!]]> </script>
</div>
Este método é especialmente adequado para pré -carregar um grande número de imagens. O site da minha galeria usa essa tecnologia e possui mais de 50 imagens pré -carregadas. Aplique o script na página de login e, desde que o usuário insira a conta de login, a maioria das imagens da galeria será pré -carregada.
Snippet JavaScript 2
Este método é semelhante ao método acima e também pode pré -carregar qualquer número de imagens. Adicione o script a seguir a qualquer página da web e edite -o de acordo com as instruções do programa.
A cópia do código é a seguinte:
<div>
<script type = "text/javascript">
<!-//-> <! [CDATA [///> <!-if (document.images) {
img1 = new imagem ();
img2 = new imagem ();
img3 = novo imagem ();
img1.src = "http: //domain.tld/path/to/image-001.gif";
img2.src = "http: //domain.tld/path/to/image-002.gif";
img3.src = "http: //domain.tld/path/to/image-003.gif";
}
//-> <!]]> </script>
</div>
Como pode ser visto, cada carregamento de imagem requer a criação de uma variável, como "img1 = new imagem ();" e a declaração de endereço da fonte da imagem, como "img3.src =
"../path/to/image-003.gif"; ". Consulte este modo, você pode carregar quantas fotos quiser.
Melhoramos esse método novamente. Encapsule o script em uma função e use addLaadevent () para atrasar o tempo de pré -carga até que a página seja carregada.
A cópia do código é a seguinte:
function preloader () {
if (document.images) {
var iMg1 = new Image ();
var iMg2 = new Image ();
var iMg3 = new Image ();
img1.src = "http: //domain.tld/path/to/image-001.gif";
img2.src = "http: //domain.tld/path/to/image-002.gif";
img3.src = "http: //domain.tld/path/to/image-003.gif";
}
}
função addloadevent (func) {
var OldOnLload = Window.OnLload;
if (typeof window.onload! = 'function') {
window.onload = func;
} outro {
window.onload = function () {
if (Oldonload) {
OldonLoad ();
}
func ();
}
}
}
addLaadevent (pré -adicionador);
Método 3: Use o Ajax para implementar a pré -carregamento
O método fornecido acima parece não legal o suficiente, então agora vamos analisar um método que usa o AJAX para implementar a pré -carga da imagem. Esse método usa o DOM, não apenas as imagens pré -carregadas, mas também pré -carrega CSS, JavaScript e outras coisas relacionadas. O uso do AJAX é melhor do que usar diretamente o JavaScript, a vantagem é que o carregamento de JavaScript e CSS não afetará a página atual. Este método é simples e eficiente.
A cópia do código é a seguinte:
window.onload = function () {
setTimeout (function () {
// xhr para solicitar um js e um css var xhr = novo xmlHttPrequest ();
xhr.open ('get', 'http: //domain.tld/preload.js');
xhr.send ('');
xhr = novo xmlHttPrequest ();
xhr.open ('get', 'http: //domain.tld/preload.css');
xhr.send ('');
// pré -carga Imagem nova imagem (). src = "http: //domain.tld/preload.png";
}, 1000);
};
O código acima é pré -carregado com "pré -ad.js", "pré -ad.css" e "pré -ad.png". O tempo limite de 1000 milissegundos é impedir que o script pendure, o que causa problemas funcionais na página normal.
Abaixo, vamos ver como implementar o processo de carregamento usando JavaScript:
A cópia do código é a seguinte:
window.onload = function () {
setTimeout (function () {
// referência a <head>
var head = document.getElementsByTagName ('Head') [0];
// Um novo CSS
var css = document.createElement ('link');
css.type = "text/css";
css.rel = "STILESHEET";
css.href = "http: //domain.tld/preload.css";
// Um novo JS
var js = document.createElement ("script");
js.type = "text/javascript";
js.src = "http: //domain.tld/preload.js";
// pré -carga JS e CSS Head.appendChild (CSS);
Head.appendChild (JS);
// Imagem de pré -carga
novo imagem (). src = "http: //domain.tld/preload.png";
}, 1000);
};
Aqui, criamos três elementos através do DOM para implementar a pré -carga de três arquivos. Como mencionado acima, com o Ajax, o arquivo de carregamento não é aplicado à página de carregamento. Desse ponto de vista, o método Ajax é superior ao JavaScript.
Ok, este artigo será introduzido aqui. Todo mundo já entendeu os três métodos de implementação da tecnologia de pré -carregamento da imagem. Qual é mais eficiente? Acho que os amigos também viram, então aplique -o em seus próprios projetos.