Image Gallery, Preload, and AJAX

Question

Hey, I'm trying to create an image gallery, but I'm stuck with whether to load all the images while the page is loading, or get ajax to request new images before they are displayed in the gallery?

The example below shows that I am viewing the second image and uploading 2 hidden images while image 5 is loading via an ajax request. I thought that if I keep two uploaded images between the viewed image and the ajax download image, users do not need to watch the image download

Image Gallery (Viewing Single Image) 1 2 3 4 5 +-------+-------+-------+-------+-------+ | |Loaded | | * |Loading| |Loaded | On |Loaded |Loaded | AJAX | |Hidden | Show |Hidden |Hidden |Request| +-------+-------+-------+-------+-------+ 

I have not used ajax with localhost, so I don’t know what performance it compares by simply loading images from the page and hiding them.

Answer 1

You can usually use browser caches to quickly download images. A very reliable way that I found for this is as follows:

 $("<img>").attr('src', imageSrc); 

This creates an image element, does not add it to the DOM, but the browser will still load the image and cache it. In this case, you can add either the created image element, or use a new image element with this image source, and there should be no delay in loading.

I'm not sure what you mean by ajax download. Since an ajax request is no different than any other request, there should be no performance difference between using ajax and just uploading images. There may be some overhead on the server if you use a script to upload the image in some way.

Answer 2

Ultimately, loading while parsing HTML, using javascript / jquery preloading or using ajax, is done at the same time, especially if the image is large (if it isn’t, don't you ask?).

The system should open a connection, make a GET request for the file, and the file is transmitted over the network. If it is cached, it is not relayed. Network transfer is a bottleneck, and different boot methods do not change this.

You will affect the user timeout in two ways:

• Reduce the size of your media, for example. use thumbnails, be smart when compressing, reuse large files so you use caching ...

• Image loading time is thorough, which is what image preloading does (with or without AJAX, it's the same thing). It is probably not possible to know exactly when to start downloading the image so that the user does not wait. Uploading three images in advance, as you suggest, sounds good to me. Users can wait from time to time, but even more bust.

For a slide show, you can have an array that will remember which images are uploaded, like thumbnails or fully loaded, which ensures that you will not make unnecessary repeat requests.

I really did not give you the magic bullet ... There is no one, but I hope this helps.

Answer 3

I already had a situation in which I also took both samples to find a solution

Basically for loading the main image [thumbnails] you can use lazy loading for the page

and to upload a large or main image, you can upload a thumbnail into it even after you can write code to load a large image into it.

 $('#GalleryImage img.mainImage').load(function() { $(this).attr('src',$(this).attr('src').replace('thumb','large')); }); 

May it help you