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.
Related
This is such a bizarre thing that even just typing in the title makes me question my own sanity. Anyway, I'm trying to figure out why my reports are taking so long to load and I've discovered that Chrome is loading an image of my page, after the page has finished loading. But don't take my word for it, check this screenshot from dev tools.
You can see that there are two instances of report.test.php being loaded. The first one is a document and the second one is an img. (You can tell by the icon and also by filtering the list on those two types).
So in this example the report is small and loads about 15 rows of data and renders them in an HTML table. This is done after 710 ms (in this example) and it all looks good except that the favicon in the browser tab keeps spinning for another 808 ms while that img loads. Not a huge deal on a small report like this one but if you load a lot more data that takes, for example, 6 seconds to load, then this second image also takes an additional 6 seconds to load for a total of 12 and that's a big deal.
Now as I said, when the document is finished loading I can see that the HTML has finished rendering so I can essentially use the report and ignore the spinning favicon, but this causes problems if I try to load another report, in another tab, while that favicon is still spinning. It gets jammed up and basically brings everything to a grinding halt and it's all bad. Bottom line, I need to stop this from happening.
So what is this img version of my report? Why is it there and can I prevent it?
Turns out chrome was generating its own image because I told it to use a blank background image in my body style.
Background
I had added background:url('') to the body tag of the reports page.
<body style="background:url('')">
I did this because the stylesheet I was using at the time added a background image, which I wanted for every other page in my app but not the reports page, so this was my way of overriding the style sheet.
Solution
Anyway, apparently when you submit a blank string as a background image chrome then generates its own image and it does so by making an image of the entire page, and the more HTML on the page the longer it takes to generate this image.
The solution is to not pass in a blank string to background:url.
My page will have a lot of images, which will take a lot of time to load and will make it very slow, so my question is
how to make the page to download and display only the pictures that are being shown in front of you, exactly the same as performing image search with google, whenever you scroll it will keep downloading and displaying the focused images.
Thanks all.
Image lazy loading
eg Lazy Load Plugin for jQuery (http://www.appelsiini.net/projects/lazyload)
Demo: http://speckyboy.com/demo/lazy/index.html
Use ajax, you can easily detect the view port by javascript and the images dimensions, so when scrolling, all you have is to send request to populate more rows of the view, this could be tables or div.
You can't do something like that in PHP.
It has be done in JQuery.
There is a plugin that does what you need, called Lazy Load.
Take a look on this site: http://www.appelsiini.net/projects/lazyload
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
I am creating a website where there are many pages to scroll through using next and prev buttons. I started by creating a java slideshow, but then there where many problems creating hashtags and subsequent social like buttons for each image. I ditched that framework because 1) users with JS turned off could not enjoy the images at all and 2) it was a pain in my ass.
What I have now is a collection of many pages with an image on it where each next button has a link to the next page.
What is the best way to make the page transition look like nothing changes except for a preloaded image (header, asides and footer don't 'blink')? Much like funnycatpix.com/_pics/Cat_Lookout.htm
Keep in mind I don't want to use iframes or ajax and I want to keep jquery to a minimum. I have PHP 5 on my server, as well.
Do I cache the images of the next page? Do I cache the entire next page? Do I change the header controls to extended cache lifetime?
Without seeing any code I can't offer a lot of specific help. You can cache an image very easily just by using this:
$("<img>").attr('src', imageSource);
This can be used to preload images, so what you can do is preload the images that will appear on the "next" page when the page loads or each time "next" is clicked.
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.