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
Related
need to provide an "add from existing" functionality for uploaded images. What is a basic approach to do that? Thought of displaying a modal window but thought that if there will be a lot of images it will definitely pull back the performance. Had anybody a similar task? Thanks.
I've done this once before, and the best way is to generate thumbnails for each photo to browse in a modal window. You'd also be best off by trying to have some kind of folder architecture, and even have a sort function (date added?).
Have a look at the jQuery File Tree plugin, you might be able to script something off of that (ex: every time you click an image it is append to a div on the page for a preview)
i have a question to ask you. So I have on my webpage a showcase that has some images that keep playing. I used JCarousel to build it. The thing is that when i first enter on the page i can't see the image or I see only a part of it. I suspect that this is because the site a few seconds while it loads all the images it has. My question is: how can I make certain images be the first ones to be loaded? Or how can I prioritise the way the images load on the page? By the way I'm doing this in html,php using javascript and ajax and the images are taken from a database.
Thank you very much!
If you Base64 encode them, you can put them in the CSS, or HTML. It will really increase the side of a page, so perhaps encode a low resolution picture, and then replace it with highres when it loads. That is, a preview image.
Try this tool/guide.
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.
I do not want to use jquery lazyload. because I want loading done all the pictures then show at the same time, not loading one by one.
I know some thing like this, but how to make a judge when all the images are loaded, then remove the loading.gif? thanks.
$("div#content").prepend("<img src='../loading.gif' class='ldrgif' / >");//add a image
...//loading images in div#content
$(this).find("img.ldrgif").remove(); //remove it, how to make a judge all the images are loaded?
Here's a neat example: http://jsfiddle.net/5Y3dW/
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.