How to dynamically click on all list items without displaying the results of their default behavior but invisibly loading their contents?

November 21, 2016, at 8:12 PM

I want to dynamically click on a set of unordered list items without displaying the results of the clicks. The intent is to pre-load dynamic content such as images and text that clicking on the list items will normally load and display; I want to preload the content as much as possible before the user begins to click on list items. (I've inherited code from another developer and I'm having to work within the constraints of his routine, so please bear with me.)

Each list item has an ID, like:


These would be my references. The list items are generated dynamically, and each contains an HREF to content that will be displayed in a hashed area of the page (the content consists of server-loaded images and text extracted from a SQL database using a query).

Normally, clicking on a list item changes the content in that area of the page, but it takes time to load. Once it's loaded, though, it can be redisplayed without reloading, of course, and so revisiting it is's the initial visit that takes time.

I'd therefore like to pre-load all of that content by dynamically clicking on each of the list items in succession without displaying the resulting content, all done in the background, leaving the default content (which is automatically retrieved using the first ID in the click-list) in place. (I mention this detail to explain that the page loads initially with the first list item's content displayed, and that behavior should remain unchanged.)

How could I accomplish this with Javascript or JQuery?


Okay, here's the skinny. The content is informed by a major containing php script that houses content from an inner php script. The outer script creates an image carousel whose thumbnails reference the inner script as hashes. At any given point, the URL will take this form:


The outer script is the "g.php" script. It references a thumbnail image in the carousel identified by the "a.php" script whose GET value is the key to loading the inner content on the page.

The individual thumbnails in the carousel are HREF'd like this:

<li><a href="#a.php?a_id=467" id="w467"><img src="thumb_image.jpg" /></a></li>

So clicking on this one would revise the previous URL to:


Notice, though, that the content generated by the "g.php" script doesn't change, therefore. The inner "a.php" content switches as a hash change when its corresponding thumbnail in the carousel is clicked. It's a surprisingly effective solution, with a few caveats.

The main caveat is that nothing is preloaded except the content referenced by the first link (which corresponds to the first thumbnail in the carousel), and that behavior is hard coded into the routine and is fine.

I simply want to dynamically click each link in the list to load all of the content, and to do it in the background after the page has loaded with the first link's content exposed (which is its default behavior, and, as I've said, which is fine). And it must be done invisibly.

It also doesn't matter in what order it happens, because the user might immediately advance the carousel and click on the 14th element in it rather than the 2nd element. So, I don't want to preload the content in batches of 10 or similar increments, waiting for the user to interact with the carousel to load more content; that makes no sense, provided the design of the carousel and how it is intended to be used in any non-sequential manner.

I simply need to loop through all of the list item links and load them invisibly—in whatever sequence they should happen to load, provided the asynchronous nature of AJAX. More than likely, the user will click on one of the links that has been preloaded by the preloading routine, but if the user jumps ahead and selects something that's still in the process of preloading, that's not a problem; by the time the user has examined that content, the rest of the content will have been preloaded.

So, that's more info. I hope this provides a better backdrop for understanding what I'm up against. Without completely rewriting the entire routine, the best bet seems to be to accept its own mechanism and accommodate it by looping through an AJAX/JQuery routine that dynamically clicks and preloads all the data in the background once the page has displayed its initial content. And I do have access to the IDs of the links in the unordered list; other identifying information could easily be added to it.

Answer 1

Text is not an issue, what could be an issue is the async loading of many large images - that might not start loading in the desired order.
It would be a nice idea not to load your images somewhere hidden inside the document, but instead get from the server a JSON holding all the needed data.

You don't need to emulate clicks on all your list one by one,
you need to simply get i.e: the first 10 images, and as the user advances, load more and more (here the idea is to avoid loading stuff that the user might never explore/see/use) - but it all depends on the User Interface you have.

JSON example:

    "id" : "w125",
    "image" : "path/to/image1.jpg",
    "content" : "HTML or whatever"
    "id" : "w275",
    "image" : "path/to/image2.jpg",
    "content" : "HTML or whatever is the content"
Rent Charter Buses Company
Convert Jquery toggle to mootools

Convert Jquery toggle to mootools

I need to convert the jquery script into a mootools 1. 2.

XHR response to Json data

XHR response to Json data

I'm writing a chrome extension for a specific site Lernu. net that generates a new DOM element when the user clicks on a word.

jquery ajax upload file with post

jquery ajax upload file with post

hi guys i need your help im not very good with ajax im trying to upload a image using a form with php the image is not getting to the php i got error on.