Precarga de Imágenes CSS
Tengo un formulario de contacto oculto que se despliega haciendo clic en un botón. Sus campos se establecen como imágenes de fondo CSS, y siempre aparecen un poco más tarde que el div que se ha conmutado.
Estaba usando este fragmento en la sección <head>, pero sin suerte (después de limpiar la caché) :
<script>
$(document).ready(function() {
pic = new Image();
pic2 = new Image();
pic3 = new Image();
pic.src="<?php bloginfo('template_directory'); ?>/images/inputs/input1.png";
pic2.src="<?php bloginfo('template_directory'); ?>/images/inputs/input2.png";
pic3.src="<?php bloginfo('template_directory'); ?>/images/inputs/input3.png";
});
</script>
Estoy usando jQuery como mi biblioteca, y sería genial si pudiera usarlo también para arreglar este problema.
Gracias por sus pensamientos.
12 answers
Precarga de imágenes usando solo CSS
body::after{
position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
content:url(img01.png) url(img02.png) url(img03.png) url(img04.png);
}
Demo
Es mejor usar una imagen de sprite para reducir las solicitudes http...
(si hay muchas imágenes de tamaño relativamente pequeño)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-04 15:37:36
Puedo confirmar que mi código original parece funcionar. Estaba casualmente pegándome a una imagen con un camino equivocado.
Aquí hay una prueba: http://paragraphe.org/slidetoggletest/test.html
<script>
pic = new Image();
pic2 = new Image();
pic3 = new Image();
pic.src="images/inputs/input1.png";
pic2.src="images/inputs/input2.png";
pic3.src="images/inputs/input3.png";
</script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-15 12:19:56
Http://css-tricks.com/snippets/css/css-only-image-preloading /
Técnica #1
Cargue la imagen en el estado regular del elemento, solo desplácese con la posición de fondo. A continuación, mueva la posición de fondo para mostrarlo en el cursor.
#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }
Técnica #2
Si el elemento en cuestión ya tiene una imagen de fondo aplicada y necesita cambiar esa imagen, lo anterior no funcionará. Normalmente irías por un sprite aquí (un imagen de fondo combinada) y simplemente cambie la posición del fondo. Pero si eso no es posible, prueba esto. Aplique la imagen de fondo a otro elemento de página que ya esté en uso, pero que no tenga una imagen de fondo.
#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-12-29 10:44:55
Prueba con esto:
var c=new Image("Path to the background image");
c.onload=function(){
//render the form
}
Con este código precarga la imagen de fondo y renderiza el formulario cuando se carga
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-09-03 12:51:35
Si está reutilizando estas imágenes bg en cualquier otro lugar de su sitio para entradas de formularios, probablemente desee usar un sprite de imagen. De esa manera puede administrar sus imágenes de forma centralizada (en lugar de tener pic1, pic2, pic3, etc...).
Los sprites son generalmente más rápidos para el cliente, ya que solo solicitan un archivo (aunque ligeramente más grande) del servidor en lugar de varios archivos. Consulte el artículo SO para obtener más beneficios:
Por otra parte, esto podría no sea útil en absoluto si solo está usando estos para un formulario y realmente solo desea cargarlos si el usuario solicita el formulario de contacto...aunque podría tener sentido.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:47:05
Precarga de imágenes usando HTML Tag
Creo que la mayoría de los visitantes de esta pregunta están buscando la respuesta de "¿Cómo puedo precargar una imagen antes de que comience el renderizado de la página?" y la mejor solución para este problema es usar la etiqueta <link> porque la etiqueta <link> es capaz de bloquear el procesamiento posterior de la página. Véase preventivo
Estas dos opciones de valor de rel (relación entre el documento actual y el vinculado documento) atributo son más relevantes con el tema:
- prefetch : carga el recurso dado mientras se renderiza la página
- preload : cargue el recurso dado antes de que comience el renderizado de la página
Así que si quieres cargar un recurso (en este caso es una imagen) antes de que comience el proceso de renderizado de la etiqueta <body>, usa:
<link rel="preload" as="image" href="IMAGE_URL">
Y si desea cargar un recurso mientras <body> está renderizando pero está planeando usarlo más adelante dinámicamente y no quiero molestar al usuario con el tiempo de carga, utilice:
<link rel="prefetch" href="RESOURCE_URL">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-22 07:43:13
Para la precarga de imágenes de fondo con CSS, la respuesta más eficiente que se me ocurrió fue una versión modificada de un código que encontré que no funcionaba:
$(':hidden').each(function() {
var backgroundImage = $(this).css("background-image");
if (backgroundImage != 'none') {
tempImage = new Image();
tempImage.src = backgroundImage;
}
});
El beneficio masivo de esto es que no necesita actualizarlo cuando traiga nuevas imágenes de fondo en el futuro, ¡encontrará las nuevas y las descargará previamente!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-19 04:07:32
¿Qué tal cargar esa imagen de fondo en algún lugar oculto? De esa manera se cargará cuando se abra la página y no tomará ningún tiempo una vez que se cree el formulario usando ajax:
body {
background: #ffffff url('img_tree.png') no-repeat -100px -100px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-09-03 12:52:58
Puedes usar este plugin de jQuery waitForImage o puedes poner tus imágenes en un div oculto o (width:0 y height:0) y usar el evento onload en las imágenes.
Si solo tiene como 2-3 imágenes, puede enlazar eventos y activarlos en una cadena para que después de cada imagen pueda hacer algún código.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-14 23:05:47
Cuando no hay forma de modificar el código CSS y precargar imágenes con reglas CSS para :before o :after pseudo elementos, se puede utilizar otro enfoque con código JavaScript que atraviesa las reglas CSS de las hojas de estilo cargadas. Para que funcione los scripts deben incluirse después de las hojas de estilo en HTML, por ejemplo, antes de cerrar la etiqueta body o justo después de las hojas de estilo.
getUrls() {
const urlRegExp = /url\(('|")?([^'"()]+)('|")\)?/;
let urls = [];
for (let i = 0; i < document.styleSheets.length; i++) {
let cssRules = document.styleSheets[i].cssRules;
for (let j = 0; j < cssRules.length; j++) {
let cssRule = cssRules[j];
if (!cssRule.selectorText) {
continue;
}
for (let k = 0; k < cssRule.style.length; k++) {
let property = cssRule.style[k],
urlMatch = cssRule.style[property].match(urlRegExp);
if (urlMatch !== null) {
urls.push(urlMatch[2]);
}
}
}
}
return urls;
}
preloadImages() {
return new Promise(resolve => {
let urls = getUrls(),
loadedCount = 0;
const onImageLoad = () => {
loadedCount++;
if (urls.length === loadedCount) {
resolve();
}
};
for (var i = 0; i < urls.length; i++) {
let image = new Image();
image.src = urls[i];
image.onload = onImageLoad;
}
});
}
document.addEventListener('DOMContentLoaded', () => {
preloadImages().then(() => {
// CSS images are loaded here
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-28 19:19:43
Si los elementos de la página y sus imágenes de fondo ya están en el DOM (es decir, no los está creando/cambiando dinámicamente), entonces sus imágenes de fondo ya se cargarán. En ese punto, es posible que desee ver los métodos de compresión:)
La única manera es Base64 codificar la imagen y colocarla dentro del código HTML para que no tenga que contactar con el servidor para descargar la imagen.
Esto codificará una imagen desde la url para que pueda copiar el código del archivo de imagen e insertarlo en su página de esta manera...
body {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-11 03:33:06