Question

I’ve created a website with only one page. On this page, i can click on images and i show or hide popup (with jquery).

It works fine.

All these popup contains text, images (i use php to generate this content).

<div id="pop_up_1>
    <!-- content : text / images -->
<div/>
<div id="pop_up_2>
    <!-- content : text / images -->
<div/>
and so on

It’s like i have 10 pages inside one page. It’s a lot of content.

Do you think it’s better to load everything at the beginning or load the content with jquery ajax :

$("#myDiv").load("ajax/video-mur-images.php");

I’ve tested the 2 solutions and i’m not sure which one to choose.

The first one : everything is loaded and no more query after but a lot of source code and elements.

The 2nd one, less elements and less source code but i have to load the content when the user click on a button.

I guess it depends on how much data i need to load. So what is the limit i should consider ?

Answer 1

This is an interesting philosophical question. Often, as you do now, developers start with data volume, but in the end it’s all about user experience.

Does your page load slowly? If so, have followed the best practices to speed up page loads? And what would annoy the user more — initial load or to have to wait on each interaction?

Also note that while web crawlers for search engines are getting better, they do not load your AJAX content. When you decide to go on this path, use a framework that gives you bookmark capability and also makes internal links understandable to the crawlers.