This question already has answers here:
jQuery event for images loaded
(14 answers)
Closed 8 years ago.
I want to create a picture preview plugin and for this i want to create a dynamic bar under the preview image with a title and so on
The Images have no consistent width so I need to adjust the bar everytime I select a new Picture.
The preview Image source is also created dynamicly with the source path of the clicked image but another directory.
To adjust the bar i ask for the preview image's width: var width = $("#maximized_image").width(); and I call this directly after I set the source of the preview image.
But my problem is that sometimes apparently the image is loaded after the width is defined so my width is 0 and my bar is not visible. Is it possible to wait for the image is loaded or force jquery to wait for it?
Or does anyone have another solution?
EDIT:
Here is what I have till now:
var img = $(this).attr("src");
var img_split = img.split('.');
var img_path = img_split[0];
var rest = img_path.substring(0, img_path.lastIndexOf("/") + 1);
var last = img_path.substring(img_path.lastIndexOf("/") + 1, img_path.length);
var max_image = rest + "/normal/" + last + "." + img_split[1];
$("#image_maximizer").css("height", win_h).css("width", "100%").css("display", "block").css("background", "rgba(0, 0, 0, 0.6)");
$("#render_img").attr("src", max_image);
var width = $("#maximized_image").width();
alert(width);
this sets the image but i don't get the image's width
you can load the image but render it off screen, get the width then load it where you need it (you wont be loading it twice as its already loaded/cached)
I'd suggest though that you load the image THEN load in the bar with a nice fade effect or something, I'm sure a slight 300ms etc delay wont make too much difference?
Using something like onLoad for the image will say when the image is loaded but it will still have to be rendered first
Run a function when the page is fully loaded including graphics:
$( window ).load(function() {
// Run code
});
jquery load event
Related
I'm trying to assign variables that store the height and width of an image from the local "img" folder. I tried something along the lines of
myWidth = (("img/myImage.png").naturalWidth);
but as far as I can tell, that only works if the image is already present somewhere on the page. Is there a way to do this by getting Javascript to view the file's properties in the folder?
EDIT: I'm not doing anything too technical. I just have 600 or so small images that need to be in separate divs that are the same pixel width and height as the image, and each image is different. I'm trying to write a script to generate all the code for my css without having to type it all in manually.
You can use an Image element to get the dimensions. I have previously created a tool that fetches image dimensions via JavaScript for an SO question. You can see it in action here: https://codepen.io/NikxDa/pen/apegZa
Necessary part:
var img = new Image ();
// Handle onload (will contain data after file has loaded)
img.onload = function () {
alert ("The dimensions are: " + this.width + "x" + this.height);
};
// Load the file by fileUrl
img.src = <fileUrl>;
Hope it helps.
This question already has answers here:
jQuery height() returns 0 on a visible div - why?
(5 answers)
Closed 9 years ago.
I am using
$(document).ready(function(){
var height = $('#home_sidebar').height();
});
to get the height of my home_sidebar div. The code is only executed when the page is fully loaded. However it returns different numbers from time to time. For example, sometimes it says 1699, sometimes it returns 1398.
There are "img" and "a" tags inside this div, what could possibly go wrong?
By the way, I am implementing a docking div on http://www.city365.ca. If you see the colored icons stick to the top of the page, it is working.
If you see the colored icons docking at the bottom of the page, it is not working.
use $(window).load() to make sure your images are loaded
$(window).load(function(){
var height = $('#home_sidebar').height();
});
Try this:
$(window).on('load', function(){
var height = $('#home_sidebar').height();
});
$(window).on('load'... will wait for the images to load before firing.
I would also state another (obvious) possibility which is that you resized the window between loads. Just to be complete :)
I have this jQuery code which centralizes an image within a DIV horizontally and vertically:
var $itemImage = $('.a-img');
$itemImage.each(function() {
var $img = $(this);
var h = $img.height();
var w = $img.width();
$img.css('margin-top', +h / -2 + "px").css('margin-left',+ w/ -2 + "px");
});
It works when the page is first loaded. However, there's a link on the page that will show a pop-up box where you can update the photo. Once you click "Upload" on the pop-up box, the image on the main page will change without refreshing the entire page. The jQuery code that initially applied to the image no longer works (the image is no longer centralized).
How do I solve this problem?
Put this into a function, and call this function when you load the image. Oh, and this is JavaScript. Remove the $ on the variables: itemImage instead of $itemImage, img instead of $img.
How do I go about getting what the height of an element on a page would be if it ignored the 'height' css property applied to it?
The site I'm working on is http://www.wncba.co.uk/results and the actual script I've got so far is:
jQuery(document).ready(function($) {
document.origContentHeight = $("#auto-resize").outerHeight(true);
refreshContentSize(); //run initially
$(window).resize(function() { //run whenever window size changes
refreshContentSize();
});
});
function refreshContentSize()
{
var startPos = $("#auto-resize").position();
var topHeight = startPos.top;
var footerHeight = $("#footer").outerHeight(true);
var viewportHeight = $(window).height();
var spaceForContent = viewportHeight - footerHeight - topHeight;
if (spaceForContent <= document.origContentHeight)
{
var newHeight = document.origContentHeight;
}
else
{
var newHeight = spaceForContent;
}
$("#auto-resize").css('height', newHeight);
return;
}
[ http://www.wncba.co.uk/results/javascript/fill-page.js ]
What I'm trying to do is get the main page content to stretch to fill the window so that the green lines always flow all the way down the page and the 'Valid HTML5' and 'Designed By' messages are never above the bottom of the window. I don't want the footer to stick to the bottom. I just want it to stay there instead of moving up the page if there's not enough content to fill above to fill it. It also must adapt itself accordingly if the browser window size changes.
The script I've got so far works but there's a small issue that I want to fix with it. At the moment if the content on the page changes dynamically (resulting in the page becoming longer or shorter) the script won't detect this. The variable document.origContentHeight will remain set as the old height.
Is there a way of detecting the height of an element (e.g. #auto-resize in the example) and whether or not it has changed ignoring the height that has been set for it in css? I would then use this to update the variable document.origContentHeight and re-run the script.
Thanks.
I don't think there is a way to detect when an element size changed except using a plugin,
$(element).resize(function() //only works when element = window
but why don't you call refreshContentSize function on page changes dynamically?
Look at this jsFiddle DEMO, you will understand what I mean.
Or you can use Jquery-resize-plugin.
I've got it working. I had to rethink it a bit. The solution is on the live site.
The one think I'd like to change if possible is the
setInterval('refreshContentSize()', 500); // in case content size changes
Is there a way of detecting that the table row has changed size without chacking every 500ms. I tried (#content).resize(function() but couldn't to get it to work.
I've got a web application that loads some content from an external source to the dom via an ajax call, one of the things that comes back is a set of images (different sizes and aspect ratios) to be displayed in an profile photo section. I'd like for each of the images to be resized to fit within a 64px x 64px area and I'd like to maintain aspect ratio. I was able to do this in firefox, chrome, and safari, but I've no luck getting this to work in IE 7 or 8. The problem I've had is finding a jquery event that reliably gets triggered after the image loads since the image was added after the page load. Here's what works in the listed browsers:
$(window).load(function () {
$('.profileThumbnail').each(function (i) {
var divHeight = $(this).height();
var divWidth = $(this).width();
if (divHeight > divWidth) {
$(this).css('height', '64px');
$(this).css('width', 'auto');
}
else {
$(this).css('height', 'auto');
$(this).css('width', '64px');
}
divHeight = $(this).height();
var divParentHeight = $(this).parent().parent().height();
var divNewHeight = (divParentHeight - divHeight) / 2;
$(this).parent().css('top', divNewHeight);
divWidth = $(this).width();
var divParentWidth = $(this).parent().parent().width();
var divNewWidth = (divParentWidth - divWidth) / 2;
$(this).parent().css('left', divNewWidth);
});
});
I'm also trying to center (horizontally and vertically) them which is what the rest of that code does, but I think I've got all of that working if I can find a way to trigger this code after the image loads in IE.
keep in mind this needs to work both on the first visit (not cached) and subsequent visits (cached). I'm looking for a jquery, javascript, or css solution as I want to avoid the roundtrip/bandwidth for each image.
Have you tired to add a load event to the images yourself which triggers when the image is loaded? This is how image preloaders work.
var img = document.createElement("img");
img.onload = function(){ alert('loaded'); }
img.onerror = function(){ alert('error'); }
img.src = "foo.png";
You can add the onload to the image elements themselves if you are not doing the preload approach.
The problem I've had is finding a jquery event that reliably gets triggered after the image loads since the image was added after the page load.
Instead of setting an onload listener for the window, set an onload listener for the images you are loading remotely. Set the listener after you create the image object and before you insert it into the body. The listener can basically be all the stuff insife of the .each() in the code you posted,