Hey I'm trying to make an image gallery but I am stuck at whether I should load all the images while the page loads or get ajax to request new images before they are displayed in the gallery?
The example below shows that I'm viewing the second image and have 2 hidden images loaded while image 5 is loading via ajax request. I thought if I keep two loaded images between the image being viewed and the image ajax is loading users should not have to watch an image load
Image Gallery (Viewing Single Image)
1 2 3 4 5
+-------+-------+-------+-------+-------+
| |Loaded | | * |Loading|
|Loaded | On |Loaded |Loaded | AJAX |
|Hidden | Show |Hidden |Hidden |Request|
+-------+-------+-------+-------+-------+
I havent used ajax off localhost so dont know what kind of performance it has compared to just loading the images with the page and hiding them.
You can generally rely on the browsers cache to load images quickly. A very dependable way that I've found to do this is with the following:
$("<img>").attr('src', imageSrc);
This creates an image element, doesn't append it to the DOM, but the browser will still download the image and cache it. With that, you can append either the image element you created or use a new image element with that image source and there shouldn't be a load delay.
I'm not sure what you mean by loading with ajax. Since an ajax request is not any different than any other request, there shouldn't be a performance difference between using "ajax" and "just loading" the images. There may be some overhead on the server if you are using a script to load the image in some way.
Ultimately, loading at HTML parse time, using javascript/jquery preloading or using ajax take the same time, especially if the image is large (if it wasn't, you wouldn't ask?).
The system has to open a connection, make a GET request for the file, and the file is transmitted over the network. If it is cached then it is not retransmitted. Network transfer is the bottleneck, and different load methods do not change that.
You'll influence your user's waiting times in two ways:
Reduce the size of your media, e.g. use thumbnails, be clever with compression, reuse large files so you exploit caching...
Time your image load carefully, which is what image preloading (with or without AJAX, it's the same thing) does. It's likely that it's impossible to know exactly when to start loading an image so the user won't wait. Loading three images ahead, as you propose, sounds fine to me. Users may, occasionally, wait, but more is overkill.
For a slide show, you could have an array to recall which images are unloaded, as a thumbnail, or fully loaded, which will ensure you don't make unnecessary repeat requests.
I've not really given you a magic bullet... There isn't one, but I hope this helps.
I have already have this situation in which i have also taken both sample find the solution
Basically for basic image [thumbnail image] loading you can use lazy load for the page
and for the loading the large or main image you can load the thumbnail image into that and after you can write the code for loading the large image into it.
$('#GalleryImage img.mainImage').load(function() {
$(this).attr('src',$(this).attr('src').replace('thumb','large'));
});
May this will help you
Related
i'm building a form page for create an ad, and this requires the addition of 1 or more images, so the user must compile the form, add the images, and send it with POST for go to the preview page before the ad is published.
The problem is the time taken by POST process for load the images, it's too much, is there a way for reduce this time? i know there is a method for resize the images with Canvas before the uploading, but what about the original file sent by the form with POST?
Sometimes i/o speed of virtual machines is not good. Sometimes the webservers allow only one connection from browser. You have to analyze what's going on on your server.
Check here.
I have a web application something like image gallery for the user with carousel at the bottom of the application. I was thinking of
a scenario for example what if the user uploaded 1000 images on the application image gallery.
I was just wandering what is the proper way or technique to load 1000 images that is fast so that the user can view it immediately.
Please help me.
1000 images is a lot. I would definitely not load them all at once, but rather in batches somehow. Kind of like Facebook does (I think). It fills up the view, and when you scroll down it keeps loading more, but only as you scroll down. Could also simplify it by using a "Load more"-button.
If it really is a carousel as you say, I would expect it to only show a certain number of images. In that case I would just load the ones visible and for example twice that in a buffer. Then when the user goes to the next page you can replace the current ones with the first ones in the buffer and load some more into the buffer.
Loading 1000 images at one time would be a ridiculous waste of bandwidth, not to mention it would cause major lag for the client. Some client-side JavaScript/jQuery would be required rather than PHP to load the images dynamically as the user scrolls through them, so no more resources/images are requested than needed at the specific time, say 10 at a time. Using the .click() event in jQuery on an element and checking for the end of the 'carousel' so to speak, and then using something like $("#element").attr("src", "imagePath.jpg"); to swap the images shown on the carousel should work.
So I have my own webpage here, which is a sortable thumbnails page. The load() event activates each thumbnail when the first related image is loaded. Since I'm grabbing <img> tags and text content from a hidden div on the page, the thumb activation prevents the user from clicking through to a yet-unloaded image and then waiting while the preload takes place in the background.
The call is pretty simple:
$('#content img:first-child').load(activateThumb).each(function(){
if(this.complete || this.complete === undefined)this.load();});
the .each() catches any cached images and manually triggers the load() event. Worked great and was a fast and lean website. Now, as the site continues to grow, there are over 100 <img> tags in the single HTML file and I'm wondering if there's a conventional limit that I'm approaching. Should I split the page onto 35 different html files? Should I lose the tags and the slick preloading effect in favor of a server-side request for the images on demand?
What's your instinct, as a good programmer?
Well there is no clear limit. You can continue doing the way you have done on your site for as many images as possible.
But it's just that the user might get frustrated while waiting for all the images to get 'activated'.
So in turn what you could do is to have pagination & display say 20 images per page. This way you make the image loading relatively faster.
Also after you load page1, if the user is still in page1 you could start pre-fetching page2. So as the user clicks page2 he sees a very responsive site :)
There is no one rule here. In fact if you see Google Images now a days they do something like what you have done.
You can do it like many Web 2.0 sites do it:
In the beginning, load the images displayed on currently visible part of the page.
Then load other images when user scrolls the page down.
Just a quick question:
I'm working on revamping a script that serves vehicle inventory to users.
The site receives thousands of hits per month with many pageviews per visitor.
My question is this:
I am going to have 7 images for each vehicle in the new system.
1 Main Product Photo
6 Interior Extra Photos
The 6 extras will be viewed as a thumbnail, with the ability to load the full image in a lightbox.
Now, to the question:
Should I use TimThumb (or similar) to resize the images to Thumbs on the fly, OR should I create a thumb directory and save a thumbnail for each image as it is added to the server?
I use TimThumb for the main image, and it works quite well, but I'm debating which is easier on the server for the other 6 images.
Thanks!
it might not differ while the load is low, but rebuilding thumbs on request is quite resuorce consuming. if server load matters, you should save thumbnails.
there are two ways to do this:
- generate all thumbs on image upload
- generate thumbs on first request and save them
The easiest on the server is to use javascript on the client side. Its a little slower loading for the user if there are a lot of images being served but if there are less than 10 it should be okay. Look into using jQuery and CJ Object Scaler http://plugins.jquery.com/project/cj_object_scaler
I am working with php. I have images kept in order. When i do query the images comes in order but when they load they does not load in order. The small images load first and then big images. For example I have 5 images. These images should be loaded in order(1,2,3,4,5). But here its not happening. Image 4 loads first, then 2, 1 and so on. So what can i do for this problem? Hope to get solution.
Thanks in advance.
If you are speaking about the order images are displayed by a web browser, you do not have much control over that, as long as you have several <img> tag on your page :
the browser will request the images from the server in the order it wants (most probably, the first <img> tag encountered will be the first image requested)
each image takes some time to download ; and each image is displayed when it's downloaded ; considering small images should be downloaded faster, small images should be displayed first... depending on the order they were requested -- see previous point.
In the end, if you want absolute control on the order the images are displayed, your initial HTML should probably not contain all the <img> tags: a solution would be to add those, in the right order, when the previous image is downloaded.
This can probably be done with some JavaScript code, to detect when an image is loaded (event "load") ; and when an image is loaded, just add a new <img> tag to the page, for the next one; and so on.
But I wouldn't go with such an idea: it won't work if JS is disabled, your images will not be seen by search engines.
You can control everything on your web server, but nothing on network or browser sides.
A possible solution is to build a single image containing your five images and display each relevant portion to its dedicated position.
Have you tried preloading them with a JavaScript library?
Not sure how you would implement this in PHP, but in the past I have usually had the a 'order' field for each image, then the images were added dynamically according to the 'order' field.
As you should have guessed, image is loaded according to their sizes. Ofcourse, the smaller ones will load before the bigger ones. And yeah, as eyze said, wat about you preload them with a javascript preloader and display them in the right order?