Il cursore dell'immagine non mostra correttamente le mie immagini prima di essere memorizzate nella cache

Question

MODIFICA:MeteorPad demo here. (Il dispositivo di scorrimento dovrebbe funzionare ma non dovrebbe mostrare la prima immagine, ma solo un frammento di esso. e principalmente su Safari o tutto ciò che non è Chrome), quindi fate attenzione).

MODIFICA: Il bug è che la prima immagine nel dispositivo di scorrimento non viene visualizzata correttamente, solo la parte superiore di esso, finché non si fa scorrere o si fa clic sul pulsante successivo/precedente. Questo bug si attiva solo se carichi le immagini da una sorgente di database, non quando usi il cursore "normalmente".

sto usando Ken Wheeler's Slick slider, e mentre è il migliore che ho trovato è dotato di una bella brutta bug quando voglio caricare le immagini in un ciclo each in quanto mostra solo la parte superiore di loro fino a quando premo sia il pulsanti next/prev o trascina all'immagine successiva.

mia collezione ha il seguente campo:

"galleryImages": [ 
    { 
     "name": "picture1", 
     "position": "first" 
    }, 
    { 
     "name": "picture2", 
     "position": "second", 
    }, 
    { 
     "name": "picture3", 
     "position": "last" 
    } 
] 

Io uso gallery come il contenitore slick:

<div class="gallery"> 
    {{#each galleryImages}} 
    <div>{{> Images}}</div> 
    {{/each}} 
</div> 

<template name="Images"> 
    <img src="{{imageUrlMaker name}}" alt="{{name}}"> 
</template> 

Il imageUrlMaker solo crea l'URL corretto per andare a prendere loro a, non è un problema.

E quando Images è reso inizializzo il dispositivo di scorrimento:

Template.Images.onRendered(function() { 
    setTimeout(function() { 
     $('.gallery').slick({ 
      arrows: true, 
      dots: true, 
      infinite: true, 
      mobileFirst: true, 
      adaptiveHeight: true 
     }) 
    }, 100) 
}) 

La ragione per la setTimeout è che trovo cancella alcuni dei tempi del cursore inizializza prima che le immagini vengono caricate (per qualche motivo).

Come ho già detto, la prima volta che visito una pagina con immagini, queste non verranno visualizzate (solo la parte superiore) finché non vengono trascinate o si fa clic sui pulsanti prev/next. O potrei ricaricare la pagina e tutto funzionerà.

Qualcuno può pensare a una soluzione alternativa oa una soluzione, magari utilizzando position: "last" in modo intelligente? Qualcuno può capire perché questo bug mostra?

Answer 1

Prima di tutto: si sta inizializzando l'intero cursore slick su ogni immagine di rendering, se non sbaglio. Pertanto sarebbe preferibile eseguire $('.gallery').slick entro Template.Gallery.onRendered() anziché Template.Images.onRendered().

Il problema è che dovrete attendere (1) la Raccolta di galleria per essere pronta e (2) le immagini da caricare.

L'unica cosa che ho potuto venire con per affrontare entrambi questi problemi è quello di accedere alla raccolta all'interno di un Meteor.autorun() e assicurarsi che la prima immagine viene caricata dal browser utilizzando un Image.onload:

Template.Gallery.onRendered(function() { 

    Meteor.autorun(function() { 
    var firstImage = Gallery.findOne(); 
    if (firstImage) { 
     var img = new Image(); 
     img.onload = function() { 
      $('.gallery').slick({ 
       infinite: true, 
       mobileFirst: true, 
       adaptiveHeight: true 
      }); 
     } 
     img.src = firstImage.url; 
    } 
    }); 
}) 

vedo due possibili problemi con questo approccio, però:

• Dal momento che l'inizializzazione chiazza di petrolio si trova a Meteor.autorun() che verrà eseguito ogni volta che c'è un cambiamento nella Galleria origine dati. Questo potrebbe o non potrebbe essere un problema.
• In realtà non è garantito che le immagini vengano visualizzate al momento dell'esecuzione dell'inizializzatore rapido. Si consiglia di incapsulare parte del codice all'interno di un Meteor.timeout() con un timeout di 0 solo per assicurarsi che venga eseguito entro il ciclo successivo. A quel punto il renderer avrebbe dovuto reagire all'origine dati e creato tutti i nodi DOM dell'immagine.

Spero che questo aiuti in alcun modo.