4

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.

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

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

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

Any ideas?

user1324329
  • 41
  • 4
  • Just out of interest, why do you need a function `$(function() { ... });` of DOM ready inside `load` callback? – VisioN Apr 27 '12 at 08:30
  • Yes, that was a desperate try. Maybe the DOM wasn't fully loaded, I don't know. Let me edit my post – user1324329 Apr 27 '12 at 08:34
  • In this post http://stackoverflow.com/questions/8388776/how-to-initiate-nivo-slider-in-ajax-loaded-content, the author found that "the problem here was not the code, but a conflict between an older version of Nivo Slider and the current version of jQuery (1.7.1). When I went back to jQuery 1.4.2 it worked". Maybe this is your case as well? – VisioN Apr 27 '12 at 08:39
  • I tried it with 1.4.2 and still no go. I'm working with the latest version of nivoslider and jQuery 1.7.2 – user1324329 Apr 27 '12 at 08:47
  • Could you provide a link to your testing web page with Ajax load? – VisioN Apr 27 '12 at 08:55
  • You can view the website: [link](http://tombroucke.be). Click on work, and the select a work. There are 3 work-pages (4d.html, dokterpoot.html and vuylsteke.html). They all have the nivoSlider problem. JS is in /script/main.js – user1324329 Apr 27 '12 at 09:05
  • `load` only returns as soon as the DOM is finished loading, what you need are the images to be done loading. Try to attach an event listener (`ready`) to them, that should do the trick. Also you should try to avoid cross-browser issues when checking for `ready` on the images - there is a jQuery plugin for that. – apfelbox Jun 28 '12 at 22:42

2 Answers2

0

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:

<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.

VisioN
  • 143,310
  • 32
  • 282
  • 281
  • It's good thinking, but it's still not working. I moved the jquery to the head section as well. I only did it for vuylsteke.html. – user1324329 Apr 27 '12 at 09:36
  • That hack does work. Problem is now that when I have 20 entries in the work section, it will take forever to load the work page. (If you want to see for yourself go to [work.html](tombroucke.be/work.html). work.html itself is also dynamically loaded, so if you start from index, you don't load the work section – user1324329 Apr 27 '12 at 10:05
  • 1
    Yes, I've already found that the problem is not in the image preloading on the loading page. The problem that by default the images in your loader have `display: none` style and throughout all iteration this style does not change. The question is why? – VisioN Apr 27 '12 at 10:10
  • The comments went out of order. I have a mess of ideas in mind :) Hm. Then I have 2 other options. 1) What if you place image preloading in the very start of the body tag on the loading page? – VisioN Apr 27 '12 at 10:21
  • YES that is the problem. And I think I kind of solved it. After the NivoSlider call, i call `$('img').css({'display':'block'});`. I also set the . `.theme-default .nivoSlider img` height to the right height. Now it doesn't load very nice, but hey at least it is working. I'll do some more experimenting later with this. Thanks for your help! – user1324329 Apr 27 '12 at 10:24
  • Regarding your previous post:I already tried placing the preloading in the beginning of the body tag, and that didn't work. – user1324329 Apr 27 '12 at 10:25
  • 2) If the first makes no sense, work.html should preload concrete images instantly before performing the load request. – VisioN Apr 27 '12 at 10:26
  • And finally regarding image sizing, it will be better to set `img` both `height` and `width` attributes. – VisioN Apr 27 '12 at 10:28
0

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.

webnoob
  • 15,747
  • 13
  • 83
  • 165