Javascript: Possible to get image dimensions before images are fully loaded? - javascript

I am building a mobile version of a website where the page data loads very quickly, but since the images on the page are large, they come in more slowly over time.
The issue is that as the images come in slowly, they push the content of the page down so the user loses his reading position.
What I want to do is determine the sizes of these images and then leave a correctly sized black placeholder for the image which will fill in with the image as it loads. So that the users reading experience is not jarred while the images open.
I was wondering if its possible to get the dimensions of the images with javascript or html5 before the image loads and then go in with jscript/html5 and set width and height attributes to the tags on the initial page load-- before the images fully have loaded.
Thanks!
*EDIT: I cannot use the width and height HTML attributes off the bat, since the images are from all different sources with no pre-known width and heights (its mostly random user posted images)

This is what the height and width attributes are for on the <img /> element. Set those to the height/ width of the image, and that space will be reserved by the renderer.
Otherwise you're in a chicken-and-egg situation; you can't magically find the size of the image; you need to download it first!

Related

when importing images dynamically in flash how can i fix all images size fixed?

when i work with flash i getting trouble when working with images
now my present project i'm uploading images dynamically, but here main problem is all the images sizes are different when i put the images into flash canvas every image looking different size means exact image size, but i need all the images should look same size in the canvas
check the image
if i change both of the height and width values that is not effecting any where, that is automatically taking fixed images size but i need all the images looks exact size, i didn't get any thing
I think I have the solution to your problem.
Basically, you need to create a container (if you haven't already done so) to 'hold' the images as they come up OR know the maximum height and width you want for the images. Then you need to make sure the aspect ratio is correct (so your picture won't be skewed. )
Code Example:
var wHRatio:Number=image.width/image.height; //this will give you the width to height ratio to make sure aspect ratio stays the same.
if (image.width>mcContainer.width){ //if not using container, enter max width
image.width=mcContainer.width;
image.height=image.width/wHRatio;
// at this point, if the height is still taller than the container, you want to shrink the image again so it's no taller than the container.
if (image.height>mcContainer.height){ //if not using container, enter max height
image.height=mcContainer.height;
image.width=image.height*wHRatio;
}
}
**** Don't forget to 'addChild' after you've completed the re-sizing.
This may not be the most efficient way of doing things, but I think it will work for your purposes.

lazy load? / load images only when visible in viewport

I have a long list of <div>s that contain <img />s and I don't want the page to be slowed down by the loading of all the images.
So, right now, I have the url to all the images in the data-src attribute and the src attribute is empty.
How can I load the image, move the contents of the data-src to src when that div or img is visible in the viewport with javascript / jquery?
By visible in the viewport, I mean when the user has scrolled to those images.
All the images are in divs, which are in a vertical list.
You can use lazy load plugin in jQuery.I think it is best suited for u
Lazy Load is a jQuery plugin written in JavaScript. It delays loading
of images in long web pages.
SEE HERE

Is background-image loading whole image or just visible part?

I have small animation using javascript and css. I made one sprite png file, composed of 24 frames, and put that image as background-image in div which has height and width of one frame.
When animation starts, javascript function is changing background-position values, so every 6 miliseconds we see next frame.
Animation is smooth, but I'm testing everything on local server, so I can't tell: is background-image loading whole image or just visible part?
What I mean is, is whole image preloaded, or some browsers, somehow, load just part of png that's visible and don't preload rest? If that's the case, I'll preload image some other way.
Anybody knows this?
Its loading the whole image initially.
Your CSS is making a HTTP request for that file, and then your CSS is styling the position of this image.
I believe one of the benefits of a sprite is that only one HTTP request is made, which is then used to display different graphics depending on positioning.
Read more details on this article:
http://css-tricks.com/158-css-sprites/
The idea was that the computer could fetch a graphic into memory, and
then only display parts of that image at a time, which was faster than
having to continually fetch new images.

Scale image as background based upon user's machine screensize

I have a image (uploaded by user, cant say about the size of that). It will be used as background image for his page.
I just want to scale it to the full size of the screen. Some think like. On load find the screensize using Jquery/javascript and add that style to the background image.
PS:- There is no Y scroll on the page. And I am not concerned about the quality of the image on scaling if image size of too small.
Check out this jQuery plugin https://github.com/iamjpg/jQuery-Ez-Background-Resize

smart resizing of image preview sizes?

im using a image preview that allows me to add css styles to the previews that pops up.
now, some images are larger than the screen so you will just see a portion of them, while other images are very small so you don't have to resize them.
is there a way to only resize the larger images and not touching the smaller ones, eg. only resize images with width or height larger than 400 px?
any other approaches to make the larger ones fit into the screen without affecting the smaller ones would be appreciated cause if i just use width=400px and height=400px all images will be at that size and the proportion will be wrong. and for smaller images you will se very large pixels.
thanks in advance
Seam carving javascript implementation is what I call smart resizing of images :)
Anyway, in Javascript, you can implement your logic depending on the width and height properties of the Image object.
Also have a look at this page, the author uses jQuery to resize images larger than specified dimensions.

Categories