Изображение слайдера не отображается правильно, прежде чем они будут сохранены в кэше

Question

EDIT:MeteorPad demo here. (Ползунок должен работать, но он не должен показывать первое изображение, а только его изображение. и прежде всего на Safari или все, что не является Chrome), так что будьте осторожны).

EDIT: Ошибка в том, что первое изображение в слайдере отображается неправильно, а только его верх, пока вы не нажмете или не нажмете кнопку next/prev. Эта ошибка появляется только при загрузке изображений из источника базы данных, а не при использовании ползунка «обычно».

Я использую Ken Wheeler's Slick slider, и пока это лучшее, что я нашел, что это идет с довольно неприятной ошибкой, когда я хочу, чтобы загрузить изображения в each цикли в том, что он показывает только верхний из них, пока не нажмет либо next/prev или перетащите на следующее изображение.

Моя коллекция имеет следующее поле:

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

я использую gallery как slick контейнера:

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

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

imageUrlMaker просто создает правильный URL для извлечения их, не вопрос.

И когда Images визуализируется инициализирую бегунок:

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

Причиной setTimeout является то, что я считаю, это стирает некоторые времена слайдер инициализируется до загрузки изображения (по некоторым причинам).

Как я уже сказал, в первый раз, когда я посещаю страницу с изображениями, они не будут отображаться (только сверху) до тех пор, пока они не будут перетащены или не будут нажаты предыдущие/следующие кнопки. Или я могу перезагрузить страницу, и все будет работать.

Может кто-нибудь подумать об обходном пути или исправить, возможно, используя position: "last" в некотором умном ключе? Может ли кто-нибудь выяснить почему эта ошибка показывает?

Answer 1

Прежде всего: вы инициализируете весь свой скользкий слайдер на каждом изображении, если я не ошибаюсь. Следовательно, было бы лучше запустить $('.gallery').slick в пределах Template.Gallery.onRendered(), а не Template.Images.onRendered().

Проблема в том, что вам нужно будет подождать (1) коллекцию галереи, которая будет готова, и (2) загружаемые изображения.

Единственное, что я мог придумать, чтобы решить обе из этих вопросов является доступ к коллекции в Meteor.autorun() и убедитесь, что первое изображение загружается браузером используя 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; 
    } 
    }); 
}) 

Я вижу два возможные проблемы с этим подходом, хотя:

• Поскольку пятно инициализатора в Meteor.autorun() он будет работать каждый раз, когда есть изменения в галерее источнике данных. Это может быть или не быть проблемой.
• На самом деле не гарантируется, что изображения будут отображаться к моменту запуска гладкого инициализатора. Возможно, вы захотите инкапсулировать часть кода в пределах Meteor.timeout() с таймаутом 0, чтобы убедиться, что он работает в следующем цикле. К тому времени рендер должен был реагировать на источник данных и создавать все узлы DOM изображения.

Надеюсь, это поможет в любом случае.