javascript - Nivoslider(在动态 ajax 内容中)不会在第一次加载时加载图像

Question

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

$("#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>

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