Las anclas no funcionan - Lazy Loader Wordpress en español

Un usuario preguntó 👇

Hola Florian,

Gracias por este plugin genial, recién comenzando …

Tengo una tabla de contenido en la parte superior de mi página con enlaces de anclaje a secciones a lo largo de la página larga.

Con este plugin, los enlaces de anclaje no funcionan correctamente: ¿el enlace te lleva a algún lugar por encima de ese ancla, probablemente porque está intentando cargar todas las imágenes entre ellos?

Miré la página larga de otro sitio con una tabla de contenido y muchas imágenes utilizadas por lazysizes.js, y no pude hacer clic en sus enlaces de anclaje sin ningún problema. ¡Esos enlaces volarían directamente a la parte correcta, saltando muchas imágenes a lo largo del camino, hasta el final de la página a una velocidad más ligera! Esperaba que fuera lazysizes.js, pero no lo conseguí con tu plugin …

¿Ayuda?

¡¡¡Muchísimas gracias!!! 🙂

(@florianbrinkmann)

hace 3 años

Oye,

¿Podría proporcionar enlaces a ambas páginas, a mí y a la que funciona como se esperaba? 🙂

Gracias Florian

Lanzador de hilos

(@wprox)

hace 3 años

¡Gracias Florian!

Mi pagina es privada.

Funciona perfectamente en: https://images.guide/ vaya a «Tabla de contenido», arrastre hacia abajo una flecha, pruebe los enlaces con secciones hacia la parte inferior de la página, cargando todas las imágenes de manera rápida y perezosa

¿Algo que estén haciendo en esa página / quiero ponerlo encima de su plugin para obtener eso?

Gracias 🙂

(@florianbrinkmann)

hace 3 años

Hola,

¿Tiene algunos plugins de barra de desplazamiento listos o algo así activo? Entonces, ¿el salto al ancla no es un salto sino un desplazamiento suave? Si es así, ese es el problema. Sin un desplazamiento suave, debería funcionar.

Saludos cordiales, Florian

Lanzador de hilos

(@wprox)

hace 3 años

Gracias Florian, tenía habilitado el desplazamiento suave en mi tema Divi, pero no deshabilitarlo no hizo ninguna diferencia. Con esa función habilitada, los anclajes funcionan perfectamente sin el enchufe perezoso. Parece estar relacionado con la pereza.

También me doy cuenta de que el plugin está demostrando tener AMBOS datos-src y src; no creo que tenga razón, solo los datos-…

Entonces, mis etiquetas como esta son img: img data-size = data-srcset = data-src = tamaños = srcset = src =

¿¿¿Ayuda???

(@florianbrinkmann)

hace 3 años

Así es, tienes ambos rasgos. El guión maneja eso, sin un src no verías una imagen 🙂

Sin mirar la página real donde está el problema, solo puedo adivinar la causa. ¿Las imágenes están muy cerca del enlace de anclaje? Si es así, el script puede cargar estas imágenes aunque no estén en la ventana gráfica, porque carga imágenes que están cerca de la ventana actual (mira el lazySizesConfig.expand opción para ese propósito). Podrías intentar arreglarlo 0, pero luego tendrías que vivir con imágenes que solo comienzan a cargarse cuando miras.

Lanzador de hilos

(@wprox)

hace 3 años

¡Gracias Florian!

Entonces está bien ver esto en mi DOM html en Inspeccionar después de cargar la página:

Pensé que cuando se aplicaron los datos, los tamaños originales de srcset, src. Pensé que eso era lo que estabas haciendo en tu antigua publicación de blog: img-> setAttribute (‘data-size’, $ size_attr); img-> setAttribute (‘data-srcset’, $ srcset); img-> removeAttribute (‘cantidades’); img-> removeAttribute (‘srcset’);

Gracias de nuevo !!!

Esta respuesta fue modificada hace 3 años por. Lanzador de hilos

(@wprox)

hace 3 años

¡Gracias Florian!

1. Revisé los lazysizes de la demostración poco después de enviar la última respuesta, así que se supone que debe verse así. Esa respuesta no se puede eliminar, ¡pero todo está bien!

2. Gran recomendación para lazysizesconfig.expand. Pasé algún tiempo mirando eso. Desafortunadamente, como relativamente novato en WP, no estoy seguro de qué formato o dónde poner eso de una manera que sea fácil con palabras en el tema de mi hijo. ¿Podrías guiarme en eso, por favor?

Gracias de nuevo 🙂

(@florianbrinkmann)

hace 3 años

Según el doz lazysizes, esto debería funcionar:

window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.expand = 0;

Debe incluirlo antes de que el script se modifique, por lo que la forma más fácil de hacerlo es incluirlo en el head como un pequeño script en línea. El siguiente código en el functions.php El tema de su hijo debería hacer exactamente eso (o su equivalente):

function themeslug_add_lazysizes_config() { ?>
	<script>
		window.lazySizesConfig = window.lazySizesConfig || {};
		window.lazySizesConfig.expand = 0;
	</script>
<?php }

add_action( 'wp_head', 'themeslug_add_lazysizes_config' );

¡Espero que ayude! Florian

Esta respuesta fue modificada hace 3 años por. Lanzador de hilos

(@wprox)

hace 3 años

Muchas gracias Florian !!!

Estoy probando el

Gracias de nuevo 🙂

(@florianbrinkmann)

hace 3 años

Sí, tienes razón, las imágenes no se ocultan correctamente si JS está deshabilitado. Acabo de lanzar una nueva versión en este momento que debería arreglarse. ¿Podrías intentarlo y probarlo si funciona para ti?

Gracias Florian

Lanzador de hilos

(@wprox)

hace 3 años

Muchas gracias Florian, las imágenes se ven bien ahora 🙂

¿Usaste la solución que pegué arriba?

¿Por qué este código a continuación no agregué functions.php? Estoy sugiriendo un código de tipo noscript similar que se recomienda en algunos blogs para actualizar CSS en elementos script / noscript, así que me gustaría saber al menos cómo expresarlo con palabras …

function some_function_name () {?>

add_action (‘wp_head’, ‘alguna_función_nombre’);

Gracias de nuevo 🙂

(@florianbrinkmann)

hace 3 años

Hola,

no, utilizo una solución con una clase que envío a través de JS y solo muestro las imágenes si esa clase está presente. La solución que publicó no funciona porque las clases no son correctas, debería ser img.lazyload.

Debo admitir que no me di cuenta de la noscript elemento en la solución anterior, eso es muy inteligente, tal vez lo use en una actualización futura 🙂

Todo lo mejor, Florian.

Lanzador de hilos

(@wprox)

hace 3 años

¡Gracias Florian! Esa solucion vino https://iamsteve.me/blog/entry/nice-and-easy-lazy-loading-with-lazysizes-js

(@florianbrinkmann)

hace 3 años

Gracias, tenlo en cuenta 🙂

Estableceré este tema en »resolver« a partir de ahora; si el problema aún no se debe resolver, no dude en comentar aquí 🙂

Todo lo mejor, Florian.

Lanzador de hilos

(@wprox)

Hace 2 años, 12 meses

Gracias Florian.

Acabo de notar el mismo error que sigue apareciendo en el retrato de ipad pro en Google Inspect no js: área gris debajo