Un utente ha chiesto informazioni su Lazy Loader di Wordpress

Immagini di sfondo nella griglia

Un utente ha chiesto 👇

Ciao Florian,

Qualche mese fa hai provato ad aiutarmi a far funzionare un caricatore pigro con il tassello per muratura “The Grid”. Sfortunatamente, mentre le caratteristiche di altezza e larghezza delle immagini sono impostate, le immagini vengono mantenute troppo alte l’una rispetto all’altra e quindi si sovrappongono al caricamento (anche se il ridimensionamento del browser fa sì che le dimensioni di tutto tornino bene, ma non posso aspettarmi che i visitatori lo facciano Fai quello).

Quindi cercherò di utilizzare un caricatore pigro con un layout a griglia fisso (ogni elemento ha la stessa altezza). A differenza della muratura, questo layout a griglia fissa utilizza immagini di sfondo.

Sembra che ho solo bisogno di aggiungere la classe “lazyload” al div corretto e il segno di spunta rivela. Nel mio caso qualcosa di simile:

https://mysite.com/wordpress/wp-content/uploads/2017/04/image.jpg) “>

Ho provato a testarlo manualmente per un’immagine e sembra funzionare (il carico pigro è cambiato pigramente).

Ho ragione?

Dato che non sono uno sviluppatore, se hai una buona risorsa che mostra come aggiungere facilmente classi a determinati div (con php?) Sarei felice di saperlo. In caso contrario, lo proverò da solo.

Grazie per l’aiuto!

Nicolas

(@ palomar83)

1 anno, 4 mesi fa

Sono appena entrato nella mia cartella del plugin Grid e ho modificato il markup direttamente nel modello di griglia in modo che le immagini di sfondo ora abbiano la “classe di caricamento lento”. E sembra funzionare bene!

Autore del plugin

(@florianbrinkmann)

1 anno, 4 mesi fa

Ciao Nicolas,

piuttosto che il lazyload class, è necessario aggiungere l’URL dell’immagine come data-bg attributo invece all’interno style caratteristica. Puoi vedere un esempio qui: https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks

Dato che non sono uno sviluppatore, se hai una buona risorsa che mostra come aggiungere facilmente classi a determinati div (con php?) Mi piacerebbe saperlo. In caso contrario, lo proverò da solo.

Hm, no, non so una cosa del genere, ahimè.

Sono appena entrato nella mia cartella del plugin Grid e ho modificato il markup direttamente nel modello di griglia in modo che le immagini di sfondo ora abbiano la “classe di caricamento lento”. E sembra funzionare bene!

È interessante 😀 Come descritto, non dovrebbe essere sufficiente (aggiungi semplicemente la classe). Un’altra cosa: rilascerai le modifiche con il prossimo aggiornamento del plugin sul plugin della griglia, quindi non dovresti modificare quei file direttamente.

Il migliore,
Florian

(@ palomar83)

1 anno, 4 mesi fa

invece di aggiungere la classe lazy, è necessario aggiungere l’URL dell’immagine come attributo data-bg invece che all’interno dell’attributo style. Puoi vedere un esempio qui: https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks

Sì, hai assolutamente ragione. Non ha funzionato, ho letto male un test del faro cromato che mi ha fatto pensare che fosse tutto a posto. Quindi ora uso data-bg e penso che questa volta funzioni (vedo i grandi cerchi concentrici durante il caricamento dell’immagine e ora la pigra esplorazione del faro ha più senso).

Un’altra cosa: rilascerai le modifiche con il prossimo aggiornamento del plugin sul plugin della griglia, quindi non dovresti modificare quei file direttamente.

Sì, sono d’accordo, cercherò di trovare un’opzione migliore.

Grazie.

Questa risposta è stata modificata 1 anno, 4 mesi fa. Autore del plugin

(@florianbrinkmann)

1 anno, 4 mesi fa

Prego. Ho provato a includere il supporto dell’immagine di sfondo qualche tempo fa, ma non è facile. Se solo potessi supportare il caso in cui le immagini di sfondo sono corrette background-image, non sarebbe molto difficile, ma ci sono anche casi in cui l’immagine è fissa background con altri sintomi, e quindi sarebbe difficile cambiarlo. Mentre scrivo, potrei avere un’idea di come risolvere quelle situazioni – ci proverò e tornerò con il risultato 🙂

(@ palomar83)

1 anno, 4 mesi fa

Grazie, nel frattempo cambierò la mia marcatura e dovrebbe essere ok. Nicolas

Autore del plugin

(@florianbrinkmann)

1 anno, 3 mesi fa

Ciao Nicolas,

Ho rilasciato una versione beta che include una nuova opzione per il caricamento lento dell’immagine di sfondo: https://github.com/florianbrinkmann/lazy-loading-responsive-images/releases/tag/v5.1.0-beta.2 (il lazy-loading-responsive-images.zip).

Potresti provare a vedere se funziona come previsto?

Grazie,
Florian

Was this helpful?

0 / 0

Lascia un commento 0

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