My website displays thumbnail images. When the user clicks on an image, the image is displayed in a larger size. The images themselves exist in two sizes, the thumbnail size for fast rendering and then the larger size.
Initially the thumbnail size is downloaded and displayed. What I want is for the larger images to be downloaded (but be hidden) once the page has rendered/loaded. That way, the initial rendering is fast, but, when the user clicks on the thumbnail, the image is already downloaded.
At first I did this by
<div name = "big_path" style= "display:hidden" src == "" path = "big/path"></div>
In js/jquery, after loading, I then set the src attribute to path, causing the image to be downloaded. I do not use this div element for anything except to download the image.
This works in IE, but Chrome does not download hidden images. Therefore, the image is first downloaded when the user clicks on the thumbnail. Maybe this is fast enough, but I'd prefer to already have the image downloaded.
What to do?
What I ended up doing was to make the div visible, but make it 1px by 1px. And then I made it a span, not div:
<span name = "big_path" style = "width:1px; height:1px" src == "" path = "big/path"></span>
And then I still set src = path once the initial rendering is complete.
You may want to do something like this:
$(document).ready(function(){
//load images
//append images
});
Basically, you are loading the large images after the document has loaded. After that, you are appending the images like this:
$('.thumbnail').append('<img src="img/lol.jpeg" />');
You may want to put this in a for loop for lots of thumbnails.
Another solution is to use progressive jpegs.
Related
I have an SVG sprite sheet which uses <view> tags to identify each sprite. To show a sprite you set the img src to the spritesheet plus the sprite name as a fragment identifer, like this:
<img src="sprites.svg#coffee" width="60" height="63" />
I have a page with a preview of each sprite, so there's hundreds of these tags on the page. When I view this page in Chrome, it downloads the SVG file once. When I view it in Firefox, however, the file seems to get downloaded once for each <img> tag, so it gets 2MB of data instead of 9k gzipped. Even if I have the file in the browser cache, it seems that one of the requests hits the cache, and the remainder of them ignore it and fetch from the server.
Is there a cache header or tag I should know about to prevent this from happening? Alternately, is this a bug in Firefox? The only one I've found is 497665, but that was resolved fixed 8 years ago.
I have a Content Slider (All-in-one-banner sort of) on the home page of my website.
Every time this banner slides onto the next image in the queue, the other images (png format) on my page are getting pixelated. Especially it happens in Chrome.
Images and Icons such as the logos, icons used for navigation, etc... - they get pixelated when a new slide changes on the banner.
Please help me.
Demo link (Open in chrome):
When the slides in the banner change, Look at the logo on the top and the logos to the right, and also the profile pics below,: indiaemerge.com/ieys2013
The solution I could figure out is that one should NOT use an image with large dimensions.
For example: I was trying to use an image of size 800px X 400px to fit it into a division of 200px X 50px. Because of this the image was getting distorted when slides would change.
I reduced the dimensions and resolution of the image to match the target division's dimensions and it worked.
Another way to fix this is to use an svg image file.
So the lesson to be learnt here is that always try to use an image (in case it is png or jpg) whose size meets your requirement as precisely as possible. If it is an svg image file then there won't be any problem.
I am making a responsive portfolio website using WordPress. I have a small issue that is breaking the layout. All images are meant to be 300px wide by 200px high.
I have also used the WordPress API to crop images if the user uploads images that are larger than the above mentioned dimensions
add_image_size( "portfolio", 300, 200, true );
What this does for me is that it inserts the width="300" and height="200" attributes to the images automatically (but the original dimensions of the image stay the same they are just being resized) This works well except when i try to resize my browser window..
Here is a senario: The client uploads an image with dimensions 300px wide and 210px high.. initially it is being resized and shown hence the layout is perfect but when i resize the browser the images gets resized as well but with respect to its "original dimensions".. hence the image with the original height of 210px is larger that the rest of the images.. and as i am floating all the images to form a 3 column layout the difference in height breaks the layout (shifting the column below this large image to the right and leaving an empty column below itself.)
How do i fix this issue? I thought of using timthumb to resize all images before they are display.. hence changing the original dimensions of the image on the fly but i think this is not an efficient way? Any other solution to this problem ? Also i dont want to using anything like jQuery Masonry as i have a specific layout to maintain.
Thanks
You can use the max-height rule from css to limit the height of all images equally.
eg:
.gallery img{
max-height: (some height);
}
Use % or em for the height, pixels might not work as well in a responsive design.
I have a website that features lots of divs. Each div contains a different animated image. Now, as you scroll down more divs with animated images are added.
After a while, a lot of GIFs are on the page at the same time and this will make the page laggy!
My question is, what would be the best method to "tidy" the previously loaded GIFs (which are not in view-port anymore) in order to reduce the "memory load" of the page?
What I have thought about:
Change the SRC of the IMGs to Thumbnails
Turn the divs invisible
Hide the divs and somehow add a dummy margin
... ?
Can anyone tell me how this image is resizing? If you remove the bg from the page with firebug you will have a clear vision of the image.
http://canvas.is/images/logo_solid.png
I notice that when the page is scaled the width and height attributes apply and start to scale the image. I have looked through the page and there is no css indicating a percentage width or height and no js in sight.
How is this working?
Thanks
I would tentatively say this is a browser built-in feature as the url ends with image extension, browser know it's not html page, so it would render it in a different way.
Well, I still do not think there is something magical out there, in a normal html page, if you set a fixed width to an image, browser will resize its height automatically. It's more like this scenario:
<div class="image-wrapper">
<img width="100%" src="..."/>
</div>
image would be resized per its original ratio with the width change of image-wrapper