This is basically a design question.
Preface
I have a web page which shows a list of thumbnails. The number of images can be anything, maybe hundreds.
What I need to do is this?
Get the number of total thumbnails.
Get the web url for each image.
Load each thumbnail into a box (div) and add each box dynamically to
scrollable container div.
User should be able to interact with the boxes ASAP.
I have other AJAX calls happening in the page.
The default method, set the src to each box and add it to the container. When loading stops, the image shows. The problem is that, all these image loading will hog the network and my other AJAX calls may timeout, which I can't allow. Also, the user should see the page as loading complete (loading bar should not show activity).
My Solution
The solution I have come up is this:
Use a local image as space holder.
Set the src of all the boxes as local image.
Change the src for first image to the web url.
When onload of the image fires, change the src of next image and so on.
Pros:
Only one image will be loading at a time.
User will be able to interact with the boxes.
Cons:
Only one image at a time may be a waste of bandwidth (what about 5 images at a time?)
What happens if user scrolls to the end, the images won't show up until all the other images have loaded.
Your opinion
I need expert opinions on how to improve this solution.
Requirements:
Some bandwidth should be available for other AJAX calls
User should be able to interact with the page.
Questions:
Is this solution having any other issues?
Is this cross browser?
Am I correct in saying this will not affect the other AJAX calls?
Related
I was searching for "Jaguar Rims" in google image results. I clicked on a plain photo that had no site logos or insignia on it. But after-the-click a promo of "39 photos" and the site address was populated onto the image.
How did they do this? I would like to re-create this effect
Was it an animated JPEG? Or rendered with Javascript? Keep in mind, I find this interesting only because it is happening within Google Image Search results.
This is the google image search I performed (it's 3rd image from the left but this could change).
Here is the image:
http://preview.netcarshow.com/Jaguar-XKR-2010-1600-21.jpg
It's not animating. The two images were likely cached at different times by google and the image publisher changed the image in-between those times.
I beleive the only way is with php. You can check the referer header and display a different image accordingly. This is how you check the header in php:
$_SERVER['HTTP_REFERER']
First you see icon data:image/jpeg;....... size: 259x194
After you click on it, you get similar image but scaled up:
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1p2CI2vcgxkxMr8j8L0HfdmEBv_ggGM8RAri4-FWP9B0ENj9vDw
After part of second, you get full image, but becouse its big and it need time to load and resize, there is short time then you see #2 image.
http://preview.netcarshow.com/Jaguar-XKR-2010-1600-21.jpg
.#2 and #1 is same image, but without #2 part, seeing big image should take longer i guess after you click on icon.
So basically it is animation from 3 frames. icon -> bigger icon -> big image.
p.s. Google made icon from this one, that can be found in same site:
http://img2.netcarshow.com/Jaguar-XKR_2010_1024x768_wallpaper_21.jpg
I have a page with a pdf that gets displayed inside a slider. When it's loaded it's fantastic however it looks a touch ugly until that point as the scroll arrows will be on screen but the dimensions of the slider haven't yet been established so it's all bunched up.
I created a white div that was larger than the pdf and targeted it with a jquery function that after a certain amount of time would hide and reveal the pdf underneath.
Th problem is that some pdf's take longer than others to load. I don't want someone to have to wait 5 seconds when only 1 may be needed and I also don't want someone to wait 5 seconds only to then see the 'mess' that I was trying to hide as that pdf may take longer to load especially taking net speed into account.
What I'd like is either for the function to know when it should hide or a way for the slider to be 'better', possibly already knowing the size of the page, loading the first and then while that it being read the others could be loaded in the background?
Any ideas / help would be appreciated.
Thanks.
Example if I make a script that loads images only when user scrolls page to the location of where the image should be, would that script reduce page loading time and is it better in the long term?
You wont decrease the time for the dom to become ready and displayed (at least not by much). Images are loaded asynchronously by the browser and thus placeholders are put in place of images until they are fully loaded.
I would however suggest as you said implementing a script that loads images as they are needed, no point wasting peoples bandwidth with images that aren't needed. (If you have a lot of images), for example like google image search.
Bear in mind, if a user loads a page and scrolls down very quickly, a page that laods all images at once will have to wait for all images to load to guarantee the ones in view are displayed. If you implement some sort of script you can control the way and order in which the images load.
Yes, you will reduce the loading time, but you will make your users wait for images to load when they scroll down.
I am playing with a new website I created a few days ago.
The site contains lots and lots of gifs there is displayed on the frontpage. As of right now, a static .png thumbnail is showed and when hovered, it displays the gif instead.
This is pretty much what I want. However, as of now, the site preloads every single gif on the page, which takes a long time and a lot traffic is wasted. If there are 50 gifs on the frontpage and every gif is 2mb, that's 100mb traffic per user.
Isn't it possible to only load every png, then load the gif if it's hovered? I know it won't play smooth the first time, but I don't have a whole lot of web traffic on my web hotel.
Is this possible with either some PHP or good-old JavaScript?
Thanks
Change the URL of the image with hover. In this case with jQuery
$('#my_image').hover(function(){
$('#my_image').attr('src','my.gif');
});
Want to make it dynamic without having to set it per image? Add the HTML5 Data element:
<img src="my.png" data-gif="my.gif" />
And with JavaScript:
$('img').hover(function(){
$(this).attr('src',$(this).data('gif'));
});
You can add the HTML that contains the GIFs to the DOM after page load, inserting it as a string or using AJAX.
Another viable solution is to use CSS sprites and eliminate all those images by combining them into a larger one.
You're thinking about it the wrong way. Browsers don't request images unless you include the images in your page. You shouldn't try to prevent included images from being loaded, you should simply not include the images in the first place.
Remove the image URL from your code. In whatever code you have that currently makes the hidden image visible, you can set the URL as well.
Are the file names the same except for the extension? If so I would recommend this approach
Stop a gif animation onload, on mouseover start the activation
What you would do different is replace the .png with .gif this will load the gif on hover instead of at page load. Right now it sounds like you are loading both the .png and the .gif in a hidden div.
Edit:
Then on mouseout you would switch the source back to the .png.
I have a bunch of images held on a third party server that I want to load and display as thumbnails on a webpage...
Can I use JavaScript to load each image, crop and resize them to all be the same size, then display them in a grid on the page?
Ideally, I'd like to be able to do it client side. I don't really want to pre-load and process them on the server as I do not want to increase bandwidth usage..
You can put each image inside a block container with fixed dimensions and overflow: hidden, thus effectively cropping them (you can also position the image inside the container with negative top and left values to select which part of the image will be visible). All of this is standard CSS fare. The same goes for displaying the elements in a grid layout. See an example.
However, be advised that this kind of solution, although it requires almost no preparation, can be deceptively easy to follow. The user will still have to download the full, uncropped image for every cropped element you show in the page, which could turn out to be many MBs of data.
Depending on what your use case is, it might be far more preferable to adopt a server-side solution that pre-processes the images.
Maybe this is not exactly Javascript or Jquery based solution, but this script can help a lot on eCommerce websites or other types of sites where pages are full of thumbnails. It have cache mechanism, so images are processed only once:
http://shiftingpixel.com/2008/03/03/smart-image-resizer/
JS can't directly crop/resize an image, unless you're using a <canvas> tag. At most it can fake a crop by putting the image into another element with overflow:hidden and adjusting offsets/boundaries. You can fake a resize by setting the image's height/width/zoom CSS attributes.
But if you're concerned about bandwidth, consider that a client-side resizer requires the client to load a full-sized image from your server, BEFORE it can do any kind of adjustments on it.
Javascript is a client sided language. So the images must be downloaded first before javascript can control them. If you're loading a lot of images it's best to make a server sided script that crops the images before loading them.