For example, I have lots of images, all images' original width is 100px, but original height is different. How can I add height attribute based on the original height of these images automatically. Such as
<img src="picture.jpg" width="100" height="132">
<img src="picture.jpg" width="100" height="45">
<img src="picture.jpg" width="100" heighst="321">
<img src="picture.jpg" width="100" height="136">
<img src="picture.jpg" width="100" height="214">
......
I try this, I try to get the original height of each images first,
$(document).ready(function() {
$items = $('img');
$.each($items,function(k, v){
console.log(v.naturalHeight);
});
});
it doesn't work
This works sometimes
$items = $('img');
$.each($items,function(k, v){
$(this).load(function(){
console.log($(this)[0].naturalHeight);
$(this).attr('height', $(this)[0].naturalHeight);
});
});
The problem is that how can I make sure all the images have been loaded before I run the script?