To optimize the loading of your image, consider allowing it to load without any width applied and then recording its dimensions. Server-side scripting is not necessary for this task, as you can follow these steps:
- Hide the original image to prevent any visual glitches during resizing (optional step).
- Allow the image to load and record its dimensions onload.
- Resize the image once it has finished loading.
- Retrieve and display both the original and current dimensions.
Here is a jQuery code snippet that accomplishes this:
<img id="myImage" style="display:none;" src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google!" />
<div id="status"></div>
<script type="text/javascript">
var ImageModifier = {
WIDTH: 400,
Original: null,
Init: function() {
$(function(){
$('#myImage').load(function(){
//remember original size
ImageModifier.Original = { width: $(this).width(), height: $(this).height()}
//Resize the image
$(this).css("width", ImageModifier.WIDTH);
//print info after resize
ImageModifier.Info(this);
//show the image
$(this).css("display", "block");
});
});
},
Info: function(obj){
$('#status').append("Original Size: [" + ImageModifier.Original.width + "x" + ImageModifier.Original.height +"]" +
"<br />Current size: [" + $(obj).width() + "x" + $(obj).height() +"]<br />");
}
}
ImageModifier.Init();
</script>