Question

编辑： MeteorPad demo here.（滑块应该可以正常工作，但不应该显示第一张图片，只显示它的一小部分。但是错误只会显示（主要是在Safari或一切都不是Chrome），所以要小心。）

编辑：错误是滑块中的第一张图片无法正常显示，只有它的顶部，直到您滑动或单击下一个/上一个按钮。如果从数据库源加载图像，则不会出现此错误，而不是在“正常”使用滑块时。

我正在使用Ken Wheeler's Slick slider，虽然它是最好的我发现当我想在each循环中加载图片时它会带来一个非常讨厌的错误，因为它只显示顶部直到我按下下一个/上一个按钮或拖动到下一个图像。

我的收藏集包含以下字段：

"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只是创建了正确的网址来获取它们，而不是问题。

当呈现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）Gallery Collection准备好，（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()范围内，因此每次Gallery数据源发生更改时都会运行。这可能是也可能不是问题。
实际上并不能保证在光滑初始化程序运行时渲染图像。您可能希望将Meteor.timeout()中的某些代码封装在0的超时范围内，以确保它在下一个周期内运行。到那时，渲染器应该对数据源做出反应并创建所有图像DOM节点。

希望这会有所帮助。

图像滑块在缓存之前无法正确显示我的图像

1 个答案: