如何在 AFTER jquery flexslider 完成加载之前隐藏图像

How to hide images until AFTER jquery flexslider finishes loading

本文关键字：加载 隐藏 图像 AFTER jquery flexslider      更新时间：2023-09-26

我试图在我的网站上集成wootheme的Flexslider，除了加载时，它看起来/工作得很好。

当您使用滑块刷新页面时，在 flexslider 加载之前（大约 1 秒），第一张幻灯片看起来非常大，闪烁到黑色然后消失，然后出现轮播。

我认为图像加载速度比jquery快？如何隐藏图像unti jquery加载（就像在演示网站上一样，即使我刷新了30亿次，问题也不会在他们的网站上重复出现，它都是优雅加载 http://flexslider.woothemes.com/carousel-min-max.html 的！

我在jquery之后立即加载了flexlisder.js并从演示中复制了相同的html代码（以匹配也加载的.css文件。这是我正在使用的初始化代码 - 也来自演示站点：

$(document).ready(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4
  });
});

你需要处理你正在使用的插件的回调函数使用类隐藏 CSS 中的所有图像，假设flexImages 

$(document).ready(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4, 
    start: function(){
         $('.flexImages').show(); 
    },
  });
});

将"display"的默认样式设置为"none"。 使用 show（） 将更改此样式值。

还发现幻灯片在加载前闪烁，并显示与列表项项目符号堆叠的页面。

只有一秒钟。然后它工作正常。我没有意识到我没有包含flexslider.css文件，因为我已经打开了任何会显示损坏的导航img链接的导航。

记得包括CSS！

...我遇到了同样的问题，尝试了上面的 js 解决方案 - 它运行良好，但后来我意识到当 js 由于某种原因被禁用时 - 什么都不会显示，所以我决定寻找一个非 JS 解决方案：

我只是为特定的滑块放了一些类似的东西：

.MySlider {
  .flexslider .slides img { 
  max-height: 400px; 
  width: 940px;
 }
}

效果很好，甚至反应迅速。希望对您有所帮助！

当我忘记包含弹性滑块时，我遇到了类似的问题.css

我只是在包含滑块的div的CSS中设置：溢出：隐藏; 高度：您使用的图像的高度，那么它就可以完美地工作了！

更新：这不是响应式解决方案，因为滑块会更改大小...我能做什么？？

相关文章：