Un utente ha chiesto informazioni su CPT Bootstrap Carousel di Wordpress

Precaricare le immagini di sfondo del carosello?

Un utente ha chiesto 👇

Sto usando la modalità immagine di sfondo. Alla prima esecuzione, c’è un ritardo nella visualizzazione di ciascuna immagine quando inizia a scorrere. Credo che ciò sia dovuto al fatto che le immagini di sfondo non vengono caricate dal browser finché non viene visualizzato il cursore: blocco.

C’è un modo semplice per precaricare le immagini di sfondo? Forse anche pigro per caricare loro una diapositiva o due in avanti?

Autore del plugin

(@tallphil)

5 mesi fa

Hmm, questo dovrebbe essere possibile con la relativamente nuova funzionalità per le immagini predefinite nell’intestazione HTML credo .. Vedi https://css-tricks.com/prefetching-preloading-prebrowsing/#prefetching

Quindi questo non dovrebbe essere troppo difficile da applicare e iniettare wp_head() sulle pagine che mostrano una rotonda, credo.

Vuoi fare un tentativo? Il plugin è open source: https://github.com/ewels/CPT-Bootstrap-Carousel

Phil

Lanciatore di thread

(@hommealone)

5 mesi fa

Interessante! Quindi, se dici sei o dieci immagini nella tua rotatoria, inseriresti un nuovo tag di collegamento per ciascuna di esse nell’intestazione del documento?

Ho usato un metodo javascript hacky per caricare le immagini in un div nascosto. Forse aiuterà qualcun altro finché uno di noi non troverà il tempo di provare i tag di collegamento predefiniti!

/* preload slider images so they will be available to the slider with no blanks on the first run-through */
/* without this, the background image does not become visible until the slide is fully visible, leaving gaps */
function preloadCarousel() {
	/* create an off-screen div to hold the preload images. Style it like this in your stylesheet: */
	/* div.preload { position: absolute; left: -9999px; height: 1px; width: 1px; overflow: hidden; } */
	$('body').append('<div class="preload" aria-hidden="true"></div>');
	/* create an array to hold the img tags */
	var image_tags = [];
	$('.carousel .carousel-item').each(function() {
		/* get the URL of each background image by getting the background-image style and stripping down to the URL */
		var this_image = $(this).css('background-image').replace(/^url(['"](.+)['"])/, '$1');
		/* create an img tag for each URL */
		var img_tag = '<img src="' + this_image + ' alt="" /><br>';
		/* add the img tag to the array */
		image_tags.push(img_tag); 
	});
	/* add the image tags into the off-screen div */
	$('.preload').append(image_tags);
}
preloadCarousel();

Autore del plugin

(@tallphil)

1 mese, 1 settimana fa

Interessante! Quindi, se dici sei o dieci immagini nella tua rotatoria, inseriresti un nuovo tag di collegamento per ciascuna di esse nell’intestazione del documento?

Sì!

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *