paginas - estilos css para imagenes
Precarga de imágenes CSS (12)
Tengo un formulario de contacto oculto que se implementa haciendo clic en un botón. Sus campos se establecen como imágenes de fondo de CSS, y siempre aparecen un poco más tarde que los div que se han cambiado.
Estaba usando este fragmento en la sección <head> , pero sin suerte (después de borrar el 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 tus pensamientos.
Precarga de imágenes usando HTML <link> 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 procesamiento 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 la representación adicional de la página. Ver preemptive
Estas dos opciones de valor del rel ( relación entre el documento actual y el documento vinculado ) son más relevantes con el problema:
- captación previa : carga el recurso dado mientras se realiza la página
- precarga : carga el recurso dado antes de que comience el procesamiento de la página
Entonces, si desea cargar un recurso ( en este caso es una imagen ) antes de que comience el proceso de renderizado de la etiqueta <body> , use:
<link rel="preload" as="image" href="IMAGE_URL">
y si desea cargar un recurso mientras <body> está renderizando pero está planeando utilizarlo más tarde de forma dinámica y no quiere molestar al usuario con el tiempo de carga, use:
<link rel="prefetch" href="RESOURCE_URL">
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 de http ...
(si hay muchas imágenes de tamaño relativamente pequeño)
¿Qué hay de cargar esa imagen de fondo en algún lugar oculto? De esta forma, se cargará cuando la página se abra y no demorará en ningún momento una vez que se haya creado el formulario con ajax:
body {
background: #ffffff url(''img_tree.png'') no-repeat -100px -100px;
}
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 usar otro enfoque con código JavaScript que atraviesa las reglas CSS de las hojas de estilo cargadas. Para que funcione, las secuencias de comandos se deben incluir después de las hojas de estilo en HTML, por ejemplo, antes de cerrar body etiqueta del 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
});
});
La única forma es codificar la imagen Base64 y colocarla dentro del código HTML para que no tenga que contactar al servidor para descargar la imagen.
This codificará una imagen de url para que pueda copiar el código del archivo de imagen e insertarlo en su página como tal ...
body {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
Para precargar imágenes de fondo con CSS, la respuesta más eficiente que obtuve fue una versión modificada de algún código que encontré que no funcionó:
$('':hidden'').each(function() {
var backgroundImage = $(this).css("background-image");
if (backgroundImage != ''none'') {
tempImage = new Image();
tempImage.src = backgroundImage;
}
});
El gran beneficio de esto es que no necesita actualizarlo cuando ingrese nuevas imágenes de fondo en el futuro, encontrará las nuevas y las precargará.
Puede usar este plugin de jQuery waitForImage o puede colocar imágenes en un div oculto o (ancho: 0 y alto: 0) y usar el evento onload en las imágenes.
Si solo tienes 2 o 3 imágenes, puedes vincular eventos y activarlos en una cadena para que después de cada imagen puedas crear un código.
Puedo confirmar que mi código original parece funcionar. Estaba casualmente pegado 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>
Si está reutilizando estas imágenes BG en cualquier otro lugar de su sitio para entradas de formularios, es probable que desee utilizar un sprite de imagen. De esta forma, 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 un poco más grande) del servidor en lugar de varios archivos. Vea el artículo de SO para obtener más beneficios:
Por otra parte, esto podría no ser ú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.
Si los elementos de página y sus imágenes de fondo ya están en el DOM (es decir, no los está creando / cambiando dinámicamente), sus imágenes de fondo ya estarán cargadas. En ese punto, es posible que desee ver los métodos de compresión :)
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 muestra el formulario cuando está cargado
http://css-tricks.com/snippets/css/css-only-image-preloading/
Técnica n. ° 1
Cargue la imagen en el estado regular del elemento, solo aléjelo con la posición de fondo. A continuación, mueva la posición de fondo para mostrarla al pasar el mouse.
#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }
Técnica n. ° 2
Si el elemento en cuestión ya tiene una imagen de fondo aplicada y necesita cambiar esa imagen, lo anterior no funcionará. Por lo general, debe buscar un objeto aquí (una imagen de fondo combinada) y simplemente cambiar la posición de fondo. Pero si eso no es posible, intente 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; }