I have over 1000 options in my select that all have images. Once the dropdown is clicked all of the images load and this has a knock on effect for other things happening on the page until all have loaded. Is there a way I can load all option images on page load instead of lazyloading/ajax which is what I think is happening now?
If you try to load the images on page load, you’ll have the same delay, but it will occur before anything displays on the page, which will make the page load seem unresponsive (unless you display some kind of “Loading data… please wait.” message.
How are you loading your data? Is it hard-coded in the HTML, hard-coded in your script, loaded via AJAX outside of the Select2 (e.g., via fetch()), or loaded using Select2’s AJAX feature?
What you need is a paging mechanism, whereby the data for the current “page” of results is only loaded when (or slightly before) it’s needed. If you use Select2’s AJAX feature, you’ll get this for free, but only when the user starts typing (and then there’s the network delay to load the data). Unfortunately, outside of that there’s no easy way to get paging behavior unless you provide your own DataAdapter. If you want to attempt this, I’d suggest you start with the AjaxAdapter, since it implements a paging feature, and “adapt” it to whatever type of data source you’re currently using.
Hi John,
Thanks for the reply.
I don’t mind loading the images on page load before anything else as they don’t take very long to load, the problem is that it has a chain reaction effect that messes up different functions with SetTimeouts and ajax calls.
The images are embedded in the options, so how would I go about loading them on page load if they only load once the user clicks on the select?
Many Thanks
I’m not sure what you mean by “the images are embedded in the options”. HTML <option> elements cannot contain <img> elements*—they can only contain text. (*Browsers will let you put an <img> inside an <option>, but it’s not valid HTML and the browser won’t render it in the dropdown [although it will load the image from its source URL…].)
AFAIK, Select2 also will not render such an <img> either; the only way I know to render an image in a Select2 menu item is through a custom render template.
So, to answer your question I’d need to know your answer to my previous question: where does the data for your dropdown come from? Is it hard-coded in the HTML (i.e., <select> and <option> elements), is it hard-coded in a JavaScript object array, is it fetched via AJAX outside of the Select2 (e.g., using JavaScript’s fetch() or older XHR methods), or is it fetched using Select2’s built-in AJAX feature?
Do you have a code sample I can look at? There are ways to load images asynchronously (so they don’t block anything else happening on the page), and there are ways to “preload” images during page load. Which of these techniques you should use will depend on your particular situation, which I can’t really assess without more information about your application and how you’re loading the data for the dropdown.
Hi John,
Sorry about that. The images are loaded through select2 using templateResult.
So the images only load when the dropdown has been clicked on.
Preloading the images seems the way forward but I’m not exactly sure how to go about this.
I don’t have a code sample to give at the minute as I am away from my PC.
Cheers
You didn’t mention how you’re getting your Select2 data, but I’m assuming that all of the (1000+) <option>s are loaded into the Select2 when the page initially displays.That’s not an ideal situation for such a large number of options. But assuming you can’t use Select2’s AJAX and paging features, read on.
The basic approach to preloading images is to use JavaScript to create an <img> element and set its src attribute to the URL of the image. Obviously, to preload the images you’d have to know their URLs in advance. I’m not sure if that’s the case with your setup or not (or whether the URLs are predictable—e.g., if they follow a pattern and perhaps just have an ever-increasing number at the end, like “img1.jpg”, “img2.jpg”, etc.) If your Select2 data comes from a static JavaScript object, then you should be able to pull the image URLs from there.
If you google “javascript preload images” (or, if you’re using a library like jQuery, “jquery preload images”) you’ll find plenty of examples. Here is a good article documenting some potential issues with typical image preloading strategies.
One concern I have is that you mentioned there are over a thousand items in your Select2, presumably each with its own image. I don’t know how many images the browser will retain in its cache; it might depend on the size of the images as well as the quantity.