I am trying to load an image using .load() then based on the size of that image manipulate it to fit into a certain area. The issue I'm having is that when my callback function runs the image is not actually loaded and I cannot get the height and width. This is how my code looks.
foo.load("/loadimage/"+id, function(){editImage(foo)});
function editImage(foo){
var $fooImg = foo.find(img);
var imgHeight = $fooImg.height();
var imgWidth = $fooImg.width();
}
$fooImg height and width both return 0 when this runs though. I checked the network status of the request in chrome and it says that it is "pending".
I want to run this right after the image is loaded then if the image it taller then wide I want to set CSS height to 100% and vise versa for width.
Related
So I am using the slick image slider and everything was working great until I considered what would happen if images of different heights were put in. I then wrote a short piece of js to check which image is the tallest and set the heights of all of them to that height.
window.onload = imageSlideChange;
$(window).resize(imageSlideChange);
function imageSlideChange(){
var tallestImage = $('.slick-slide').first().height();
$('.slick-slide').each(function(){ //.slick-slide is the class of each image
if($(this).height() > tallestImage){
tallestImage = $(this).height();
}
});
$('.slick-slide').each(function(){
$(this).height(tallestImage);
});
}
The weird thing though is the code only runs correctly when the slider is in the browser window. If I scroll to the bottom or top of the page and reload it will only load the images as 1px height. I thought maybe it was the images not being loaded and set the function to only run on window.loadbut beyond that I don't know what could cause this kind of behavior.
When you go to inspect the images they are the correct height. The 1px must be coming from their default height, which means that when the code runs it must be reading their heights as 0. Why???
If it helps this is all happening as drupal serves up the images, so could that be the problem?
I load a lot of images to my site and it works fine if I'm patient. But sometimes I fire an action with myDiv.style.display = 'none'; in it during image load and then the image gets width=height=0, for all the images haven't been completed. When I make my div visible again I can't see them but identify by searching for width=height=0.
If I set the width and height to something bigger than 0, I see the images but in this way I lose the real size. I also tried to change image.src by adding something like myImage.src += "?t=random";. Doing this, myImage.onload function gets fired again but width and height are still 0.
How can I get the real size of the images or how can I force a reload?
You can attach an event to your image elements:
image.onload = function () { /* Your code here */ };
This will fire when the image is actually loaded.
Make sure this event is attached before you set the src element and make sure that your src is actually valid. You can check this in the Network panel in Google Chrome (F12 on Windows).
Taking a deeper look i found following Workaround.
When the image is loaded the first time, it has a valid width and height but doesn't get painted because of the div is not visible. When I make the div visible again and initiate the reload by changing the image URL like myImage.src+="?t=random" the image.onload gets fired with the image width and height of 0. So what I can do is just to save the original values and use them if needed.
// save or reload image size in case of load interruption
if (typeof this.orgWidth == 'undefined' && this.width>0) this.orgWidth = this.width;
if (typeof this.orgHeight == 'undefined' && this.height>0) this.orgHeight = this.height;
if (this.width==0) this.width=this.orgWidth;
if (this.height==0) this.height=this.orgHeight;
I have an application in which I load an external website into an Iframe so people can QA it I need to find a way of getting the absolute size of the contents inside of the iframe so all the contents that are hidden because you havent scrolled down to that at the moment I can only seem to get the size of iframe just on the screen i.e. i have an iframe size of 800x600 and i can only get this value for some reason, but the website may be 800x1200 i need to be able to get that full size.
Currently i have this code
aWidth = document.getElementById('FrameStyle').scrollWidth - 17;
aHeight = document.getElementById('FrameStyle').scrollHeight + 500;
This is getting me the height but i have to manually add on pixels to the end which is not how i want and also the website may be longer than just 500 more pixels. So how can I go about getting the complete size of the iframes inner contents.
It looks like you can use Dot_NET Junior's suggestion if you run the code once the iframe contents have loaded, e.g.
var iframe = document.getElementById('iframeId');
iframe.onload = function () {
var width = iframe.contentDocument.body.scrollWidth;
var height = iframe.contentDocument.body.scrollHeight;
};
i have a php based site that needs to display images on the homepage that have arbitrary proportions. the requirement is to make them fill the browser window but to retain their aspect ratio.
for some reason i am having some trouble getting this to work using the jquery cycle plugin.
essentially the server-side code just pulls them from the db and pushes img elements into a div. i read the image sizes using php and write that to the alt element
then in my javascript code i have this:
$(document).ready(function() {
var window_h = $(window).height();
var window_w = $(window).width();
// sets the div that contains the jquery cycle images
$('#homepage-background-images').width(window_w);
$('#homepage-background-images').height(window_h);
$(window).resize(function() {
window_h = $(window).height();
window_w = $(window).width();
$('#homepage-background-images').width(window_w);
$('#homepage-background-images').height(window_h);
});
// homepage cycle
$('#homepage-background-images').cycle({
fx: 'fade',
speed: 5500,
fit: 1,
width: window_w,
height: window_h,
});
// ...
Obviously this isn't going to work since each image has a different aspect ratio, but I was wondering how one might pass serial aspect ratios into jquery cycle? These will always need to take the browser window size into consideration...
I have tried using the 'before' option on jquery, but it seems that you can't really affect the image properties there. I tried to use that to change the window_h variable based on a quick aspect ratio calculation but even updating that in my onBefore function seems to yield no result on the cycling images...
Any ideas? Is this tricky or am I just missing something obvious?
Thanks!
- J
If you use CSS max-width and max-height instance of HTML width and height it don't lose aspect ratio. Try adding style attribute to your image
I wrote a simple javascript code to load an image and alert its width and height, but I found its width and height will different between desktop and iPad.
For example, I load an image that size is 8000*1845, browser shows image width is 8000 and height is 1845. Therefore, on iPad, browser show image width is 2000 and height is 462.
The other image is 2600 * 2400, browser shows image width is 2000 and height is 2400, but it shows image width is 1300 and height is 1200.
I don't know whether I misunderstanding something or not. Will iOS downsize the image?
Anybody knows? Please tell me what happen?
var img8000 = new Image();
img8000.src = '8000_1845.jpg';
img8000.onload = function () {
alert(img8000.width + ' ' + img8000.height);
}
var img2600 = new Image();
img2600.src = '2600_2400.jpg';
img2600.onload = function () {
alert(img2600.width + ' ' + img2600.height);
}
When you get the image's height or width using this.width or when using jQuery's $(this).width() you are actually getting its current dimensions. If the image is scaled up or down, then the values you get will not match the actual source image's dimensions.
I made an example you can play with. It is pre-written to use onclick, but if you remove those onclick attributes and uncomment the jQuery code, you'll find it alerts the same values.
You should attempt to avoid image scaling by placing the image somewhere on the page where the CSS does not affect its size (as a test, try making a blank page containing just the image), and remove any custom height/width attributes if they exist.
Otherwise, if the scaling is done natively by the iPad Safari browser, there is little you can do.