Nivoslider（在动态Ajax内容中）首次加载时不会加载图像

Question

Nivoslider（在动态Ajax内容中）首次加载时不会加载图像

4

我正在开发一个网站（使用jQuery + Ajax），其中遇到了一个问题。当页面动态加载时（第一次加载，图片尚未缓存），它不显示图片。当我重新调用ajax加载函数时，突然我的图片出现了。

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

我在我的动态页面上调用nivoSlider，并且是在加载器div之外，这样直接访问该页面的用户也可以看到图片。

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

当您尝试不使用Ajax加载页面时，图像会按照它们应该的方式加载。有什么想法吗？

- user1324329

只是出于好奇，为什么你需要在load回调函数中使用DOM准备好的函数$(function() { ... });？ - VisioN

是的，那是一次拼命尝试。也许DOM没有完全加载，我不知道。让我编辑我的帖子。 - user1324329

在这篇文章http://stackoverflow.com/questions/8388776/how-to-initiate-nivo-slider-in-ajax-loaded-content中，作者发现“问题不在代码上，而是Nivo Slider的旧版本与当前版本的jQuery（1.7.1）之间存在冲突。当我回到jQuery 1.4.2时，它就可以工作了”。也许这也是你的情况？ - VisioN

您可以查看网站：链接。点击“工作”，然后选择一个作品。有3个作品页面（4d.html，dokterpoot.html和vuylsteke.html）。它们都存在nivoSlider问题。JS位于/script/main.js。 - user1324329

load 只有在 DOM 加载完成后才返回，你需要等待图片加载完成。尝试为它们附加一个事件监听器 (ready)，这应该能解决问题。此外，在检查图片的 ready 时，你应该避免跨浏览器问题 - 这里有一个 jQuery 插件可以解决。 - apfelbox

显示剩余2条评论

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- VisioN · 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之后解析返回的文档以查找ID为container的元素，因此想法是让它首先将这些图像加载到内存中，然后开始解析文档，最后初始化Nivoslider。可能会有帮助。

- webnoob · Answer 2

我曾经遇到一个从数据库中加载内容的问题。结果发现这是由于图片没有设置宽度或高度引起的。这意味着插件不知道图片的大小，因此无法显示它们，但浏览器在重新加载后计算了这些属性，所以第二次加载时就显示出来了。

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