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）中添加图像预加载的代码（在{{的开头） 1}}标签）。我使用了vuylsteke.html的示例图片：

body

由于<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>之后的片段加载函数解析返回的文档以找到ID为容器的元素，所以我们的想法是让它首先将这些图像加载到内存中，然后开始解析文档，最后初始化Nivoslider。可能会有所帮助。

Answer 2

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

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

Nivoslider（在动态ajax内容中）不会在第一次加载时加载图像

2 个答案: