Obtaining the actual dimensions of an image

I am trying to retrieve the original height and width of an image stored in a variable called var IMG = $("img"). The code I have written functions correctly except when used on Win XP IE8. Can someone help me troubleshoot this issue?

$("<img/>")
    .attr("src", IMG.attr("src"))
    .load(function() {
        //The following block of code is not executing
        alert(this.width);

    });

Answer №1

It is recommended to always set the src attribute after the onload handler, especially for cached images. You can test to see if this makes a difference:

$("<img/>")    
    .load(function() {
        //Code inside this block is not being executed
        alert(this.width);

    })
    .attr("src", IMG.attr("src"));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The element vanishes from sight after being detached and re-appended

Currently, I am utilizing hQuery's draggable and droppable features. My goal is to move an element from its original parent to its new dropped parent after dragging it. However, when I detach and append the element, it seems to disappear! What could ...

What is the functionality of intro.js?

Currently, I am utilizing an onboarding tour at my.bonify.de that provides a similar experience to introjs. The way we have implemented this feature is quite unattractive, using a cutout div with a very large box-shadow. We are looking to enhance it by in ...

Dealing with rowspan and colspan issues in Internet Explorer

Currently, I am facing the challenge of creating a table with a complex system of colspans and rowspans. If you want to take a look at it, you can view it here This is the HTML code for the table: <table cellspacing="0" cellpadding="0" style="table-la ...

Tips on utilizing jquery slideDown alongside appendTo

I am currently utilizing an ajax request to retrieve records from the database and then appending the data in HTML. However, I want the HTML to slide down once the data has been appended, but I'm unsure of how to achieve this. Below is the ajax metho ...

What could be causing the need to restart the server every time a style change is made?

I'm currently developing a NextJS application that utilizes PurgeCSS. It's quite frustrating because every time I tweak the classname of a component, I have to restart the server. Here is a snippet from my postcss.config.js: plugins: [ [ ...

Displaying Laravel CSS on the title tag

Why won't Laravel detect my code properly? It seems that Laravel is treating it as regular text instead of a function when it is within the title tag. <link href="{{asset('public/css/style.css')}}" rel="stylesheet"/> Take a look at ...

Transferring Information between a Pair of Controllers

Currently, I am utilizing angular version 1.x and faced with the challenge of sharing data between two controllers. In my mainctrl, I am working with the above model. The radiotmplt.radiohead=='IRU600v3' is utilized in firstctrl. Unfortunately, ...

Creating a scrolling list group in a single column that moves in sync with another longer column

When working with two columns in Bootstrap, such as col-4 and col-8, how can you ensure that a list-group stays fixed within its column and vertically aligned even when the content in the other column is scrolled down? Dealing with this responsively can b ...

Optimize Page Speed by Delaying the Loading of Slideshow Images

My main issue with reducing my pagespeed is the slideshow I have implemented. I currently have 17 rather large images in the slideshow, but for simplicity, I will only show the code for 3 images below. I am trying to find a way to load the first image as a ...

Activate the jQuery function multiple times

I am currently working on the menu structure for my website <div class="header"> <ul> <li id="menu__lnk_one"><a href="#">Home</a></li> <li><a href="#">Our Story</a></ ...

Issues arise when implementing a sticky position using CSS with incomplete functionality

I want to create a website with a menu bar that stays at the top even on long pages. However, when I use position: sticky in CSS, the menu disappears after scrolling a certain distance. Does anyone know how to fix this issue? HTML: <nav> <ul cla ...

Triggering the function once the text field is tapped again

I recently integrated a JavaScript scroll framework to create a stylish scrollbar for windows. I simply added it to a div: this.displayDiv = function () { $("#myDiv").niceScroll(); } <a href="#" onclick="manager.displayDiv();"> It ...

The JSON.stringify() method does not update the object that has been modified by an event

Below is the code snippet: //function triggered when columns are reordered dataTable.on('column-reorder', function (e, settings, details) { var userData = tableWidget.grid('userData'); console.log(userData); //userData object s ...

Tool for tracking response time on basic Ajax-requested webpage

Looking for an easy way to use ajax to load content onto a page. I want the loaded content to wait before appearing on the page, but using jQuery's .delay() function didn't work as expected. Any suggestions on how to achieve this? Appreciate any ...

Which element is able to utilize the inline-block style?

Currently, I am delving into the intricacies of the inline-block attribute and have a basic understanding that it allows elements to sit on the same row rather than stack on top of each other as they would in a normal layout. However, my grasp on how exact ...

unexpected automatic scrolling that occurs when hovering over an element

a sudden scrolling takes effect simultaneously with hovering on an element. What confuses me more is that it does not happen every time I hover over the element but just occasionally or maybe there is a specific scrolling position that I can't see yet ...

Locate an original identifier using Selenium WebDriver

In search of a distinctive identifier for the "update profile picture button" on my Facebook account to utilize it in automation testing with Selenium WebDriver and Java. I attempted driver.findElement(By.className("_156p")).click();, but unfortunately, i ...

Tips for configuring options within a jQuery widget factory using data retrieved from server-side variables stored in a JSON file

I am looking to configure the settings for a widget using JSON file variable values. How can I achieve this and how do I transfer the JSON file to the client side? The following code snippet is taken from the jQueryUI Widget Factory <script> $(f ...

CSS formatting may not be maintained when additional content is inserted after the initial text

Just a heads up, I'm relatively new to coding! I have a header and text that I want to overlay on a background image using CSS, so getting the positioning right is crucial. Everything was working fine until I added more HTML content below the text. ...

Certain divs have an opacity of zero while others do not

Currently in the process of creating a bootstrap template, which is being hosted at this link: Encountering a peculiar bug where the title spice road seems to be blocking the lorem ipsum text, yet is allowing the text in the gray jumbotron div to show thr ...