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

I am developing a website (jQuery + Ajax) and I stumbled on a problem. When a page loads dynamically (for the first time, images aren't cached yet), it doesn't display the images. When I recall the ajax load function, suddenly my pictures are there.

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

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

I call nivoSlider on my dynamic page outside my loader div, so people who arrive directly on this page, can see the images as well.

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

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

When you try to load the page without Ajax, the images load like they should.

当您尝试加载没有Ajax的页面时,图像会像他们应该的那样加载。

Any ideas?

2 个解决方案

#1

It is hard to make experiments in your website :) but you can try to add to each loading page (4d.html, dokerpoot.html and vuylsteke.html) the code for image preloading (in the start of the body tag). I used example images from vuylsteke.html:

很难在你的网站上进行实验:)但是你可以尝试在每个加载页面(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>

Since the fragment load function after get parses the returned document to find the element with an ID of container, the idea is to let it first to load these images into memory, and then start to parse the document, and finally initialize Nivoslider. Possibly it will help.

由于片段加载函数在get之后解析返回的文档以找到ID为容器的元素,因此想法是先让它将这些图像加载到内存中,然后开始解析文档,最后初始化Nivoslider。可能会有所帮助。

#2

I had this issue with content being loaded from a database. It turns out it was being caused by the Images not having a width or height set. This means that the plugin didn't know the size of the images and didn't show them but the browser calc'd these properties after the re-load so it showed the second time around.

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

Setting a width and height resolved this.

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