Javascript 在 jquery flexslider 完成加载之前如何隐藏图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14655692/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide images until AFTER jquery flexslider finishes loading
提问by user1945912
I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading.
我试图在我的网站上集成 wootheme 的 Flexslider，它看起来/工作得很好，除了加载时。
When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears.
当您使用滑块刷新页面时，在 flexslider 加载之前（大约 1 秒），第一张幻灯片显得非常大并闪烁为黑色，然后消失，然后出现轮播。
I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their website, it all loads gracefully! - http://flexslider.woothemes.com/carousel-min-max.html)
我认为图像加载速度比 jquery 快？如何在 jquery 加载之前隐藏图像（就像在演示网站上一样，即使我刷新 30 亿次，问题也不会在他们的网站上重复出现，一切都可以正常加载！- http://flexslider.woothemes.com/carousel -min-max.html)
I loaded the flexlisder.js right after jquery and copied the same html code from the demo (to match the .css file that is also loaded. And here is the init code I am using - from the demo site also:
我在 jquery 之后立即加载了 flexlisder.js 并从演示中复制了相同的 html 代码（以匹配也加载的 .css 文件。这是我正在使用的初始化代码 - 也来自演示站点：
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
回答by Seder
You need to deal with the callback functionsfor the plugin you are using
hide all the images from CSS by using a class let's say flexImages
您需要处理您正在使用的插件的回调函数通过使用类来隐藏 CSS 中的所有图像让我们说flexImages
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
start: function(){
$('.flexImages').show();
},
});
});
回答by Steve H.
Set the default style for "display" to "none". using show() will change this style value.
将“显示”的默认样式设置为“无”。使用 show() 将更改此样式值。
回答by dasCode
Also Found that the slides flash before loading and display stacked down the page with list item bullets.
还发现幻灯片在加载之前闪烁，并显示与列表项项目符号堆叠在页面下方。
Only for a second. Then it worked fine. I didn't realize I hadn't included the flexslider.css file because I had already turned of any navigation that would have shown broken nav img links.
只是一秒钟。然后它工作得很好。我没有意识到我没有包含 flexslider.css 文件，因为我已经关闭了任何会显示损坏的导航 img 链接的导航。
Remember to Include the CSS!
记得包含 CSS！
回答by dmtnexer
I just set in the CSS of the div that contains the slider: overflow:hidden ; height: the height of the images you use, then it works perfect!
我只是在包含滑块的 div 的 CSS 中设置：溢出：隐藏；高度：您使用的图像的高度，那么它就完美了！
update: this is not a responsive solution as the slider changes the size... what can I do??
更新：这不是响应式解决方案，因为滑块会改变大小……我该怎么办？
回答by Chris
… i had the same problem, tried the js solution above - it worked well but then i realized when js is disabled for some reason - that nothing will be shown up, so i decided to look for a non js solution:
...我遇到了同样的问题，尝试了上面的 js 解决方案 - 它工作得很好，但后来我意识到当 js 由于某种原因被禁用时 - 什么都不会显示，所以我决定寻找一个非 js 解决方案：
i just put some thing like that for the specific slider:
我只是为特定的滑块放置了一些类似的东西：
.MySlider {
.flexslider .slides img {
max-height: 400px;
width: 940px;
}
}
worked well, even responsive. Hope that may help!
效果很好，甚至反应灵敏。希望能有所帮助！
回答by Ross Hambrick
I experienced a similar issue when I forgot to include the flexslider.css
当我忘记包含 flexslider.css 时，我遇到了类似的问题
