javascript - Nivoslider（在动态 ajax 内容中）在首次加载时不加载图像

Question

我正在开发一个网站（jQuery + Ajax），我偶然发现了一个问题。当页面动态加载时（第一次，图像尚未缓存），它不会显示图像。当我回想起ajax加载功能时，突然我的图片在那里。

$("#overlayInner").load(source+" #loader",function() {
     $('#workImgs').nivoSlider();
});

我在加载器 div 之外的动态页面上调用 nivoSlider，因此直接到达此页面的人也可以看到图像。

<script type="text/javascript">
   $(function(){
     $('#workImgs').nivoSlider();
   });
</script>

当您尝试在没有 Ajax 的情况下加载页面时，图像会按应有的方式加载。

有任何想法吗？

Answer 1

很难在您的网站上进行实验 :) 但您可以尝试在每个加载页面（4d.html、dokerpoot.html 和 vuylsteke.html）中添加图像预加载代码（在body标记的开头）。我使用了来自 vuylsteke.html 的示例图片：

<script type="text/javascript">
var images = [
    'images/work/kapsalon2.jpg',
    'images/work/kapsalon3.jpg',
    'images/work/kapsalon4.jpg'
];

$(images).each(function() {
    $('<img/>')[0].src = this;
});
</script>

由于fragment load函数在get解析返回的文档后会找到ID为container的元素，所以思路是让它先将这些图片加载到内存中，然后开始解析文档，最后初始化Nivoslider。可能会有所帮助。

Answer 2

我遇到了从数据库加载内容的问题。事实证明，这是由未设置宽度或高度的图像引起的。这意味着插件不知道图像的大小并且没有显示它们，但是浏览器在重新加载后计算了这些属性，因此它第二次显示。

设置宽度和高度解决了这个问题。