Jquery - Images not loading on the first click

Question

I am using an ajax call to a load a part of the page inside a given div tag. The code is as follows:

    $("#Gallery").click(function() {
         var myUrl = $(this).attr("href");
         $("#Content").load(myUrl);
         return false;
    });

The Page that is loaded , in this case "Gallery.html" has a Jquery plugin that I am using to create a photo gallery. The code of the calling method is as follows:

    <script class="secret-source">
       jQuery(document).ready(function($) {
            $('#banner-fade').bjqs({
                   height      : 320,
                   width       : 620,
                   responsive  : true
            });

      });
    </script>

The images forming the gallery are:

    <ul class="bjqs">
      <li><img src="Images/Image1.jpg" title="Caption"></li>
      <li><img src="Images/Image2.jpg" title="Caption"></li>
      <li><img src="Images/Image3.jpg" title="Caption"></li>
    </ul>

The problem that I am facing is that when I navigate to the page Gallery.html via ajax call, the whole page loads except the images. There is not even an image icon there. If I navigate to the page a second time, the images appear.

Can anyone tell me why this is happening and how to rectify it?

This solution might help: http://stackoverflow.com/a/5402812/1085891 — JSuar, Dec 28 '13 at 20:19
It's possible (and quite likely) that the ready() event is not triggered when your gallery is loaded. However, when re-entering the page, the cached version of gallery.html is loaded, thus being there in time to respond to the ready() event. — Eran Boudjnah, Dec 28 '13 at 22:03
Can you show us how you include your different scripts in your pages ? (As a quick idea : if you're including the css in the Gallery.html file, try including it in the main html file) — Paul D., Dec 28 '13 at 22:47
I moved all my css into the main html file and it's working now. I tried changing the code to not include ready event() as suggested below in one answers, that did not solve the problem. I am not sure how moving the css helps so if anyone can tell me, I'll be glad.. — , Dec 29 '13 at 04:52

score 1 · Accepted Answer · edited May 23 '17 at 12:29

I don't know exactly how you used to include your css in your files but here's a possible explanation :

First, if you put css in the body tag, the browser will render the page a first time without your new styles, and then re-render the page again. (See What's the difference if I put css file inside <head> or <body>?).

Then : JQuery's ready() does not guarantee that the CSS will be loaded before the handler is executed.

What I think happened to you (no way to be sure because I don't know how you included your files) :

You click on 'gallery' link, the page renders a first time without styles, and in particular, without the bjqs stylesheet, that contains .bjqs ul{display:none}.
The bjqs JavaScript executes, modifying the style of the bjqs elements, but the css is still not applied at this point.
The css gets loaded and the browser re-renders the page with the new styles, in particular, hiding the .bjqs ul and erasing previously applied styles.The javascript is not run again, and you're left with a gallery whose images are hidden by css. That's why you saw nothing on the first click.
You load another content and then come back to the gallery (with load) : the stylesheet is already present, and the .bjqs elements are rendered with the correct style.
The JavaScript executes again, showing the gallery.
The page is not rendered again, since the browser had the stylesheet in cache and did not download it again.

To avoid this behavior, include your CSS in the head tag of the main page.

Thanks.. This explains the problem I was facing. – Dec 29 '13 at 17:08 — , Dec 29 '13 at 17:08

score 0 · Answer 2 · answered Dec 28 '13 at 23:00

0

Try this code in your gallery.html file instead. It doesn't rely on the ready() event if the DOM is already ready.

<script class="secret-source">
function initGal() {
  jQuery('#banner-fade').bjqs({
      height      : 320,
      width       : 620,
      responsive  : true
    });
}

if (document.readyState !== 'complete') {
  jQuery(document).ready(initGal);
} else {
  initGal();
}
</script>

answered Dec 28 '13 at 23:00

Eran Boudjnah

1,228
20
22

1

I tried this. It din't work. Looks like the problem isn't in the ready() event. I moved all my css files to the index.html and the code started responding properly. I still don't have the idea of why though.. – Dec 29 '13 at 04:54

Jquery - Images not loading on the first click

2 Answers2