Finding image input loading

Question

Finding image input loading

When working with the following code:

<input type="image" ... onLoad="this.style.opacity = 1" />

Everything seemed to be functioning well in IE, but encountered an issue in Chrome where the onLoad event failed to trigger upon image load.

It's worth noting that the src attribute of the input can change dynamically. When this occurs, JavaScript sets the opacity to 0 first and utilizes appropriate transition properties to create a fading effect as the new image loads. Additionally, the use of <input type="image"> is necessary due to server requirements for coordinates.

To address the issue, a workaround was implemented using an absolutely-positioned <img> element which handled the onLoad and opacity functionality. This <img> was positioned behind the <input> element, which now contained a transparent GIF pixel. While this solution worked, it was not aesthetically pleasing.

Is there a reliable method to detect the successful loading of an image within an <input> element in Chrome? Or is it similar to the challenges faced with background-image, where detection is not feasible?

EDIT: For reference, here is a link to the corresponding Fiddle

javascript html css onload

Answer 1

Answer №1

If you're looking for a quick solution, one option could be to create a new instance of a JavaScript Image object and then attach an event listener to it. Once the image has finished loading, you can then set the source of the input element:

http://jsfiddle.net/u7p9m/

Note: This method has only been tested on Chrome browsers.

HTML:

<input type="image" id="imgInput" />

Javascript:

 var picture = document.getElementById('imgInput');
            var imgObj = new Image();
            imgObj.addEventListener('load', function () { alert("Loading complete"); }, false);
            imgObj.src = 'http://jeremydouglass.com/gamertextually/images/gt_snowflake_tags-2-ach-large.png?ran=' + Math.random();
            picture.src = imgObj.src;

Answer 2

If you're looking for a quick solution, one option could be to create a new instance of a JavaScript Image object and then attach an event listener to it. Once the image has finished loading, you can then set the source of the input element:

http://jsfiddle.net/u7p9m/

Note: This method has only been tested on Chrome browsers.

HTML:

<input type="image" id="imgInput" />

Javascript:

 var picture = document.getElementById('imgInput');
            var imgObj = new Image();
            imgObj.addEventListener('load', function () { alert("Loading complete"); }, false);
            imgObj.src = 'http://jeremydouglass.com/gamertextually/images/gt_snowflake_tags-2-ach-large.png?ran=' + Math.random();
            picture.src = imgObj.src;

Answer 3

Answer №2

I encountered a similar issue in the past and found a solution. Here's how you can identify it:

window.onload = function(){
    var input = document.getElementById('input1');
    input.src='';
    input.addEventListener('load', loadImage, false);
    input.src = 'http://theoffguard.net/wp-content/upLoads/2012/04/Nick-Cage.jpg';
}

function loadImage()
{
  console.log("Image has been successfully loaded");
}

DEMO: http://jsbin.com/ufovom/9/edit

I hope this solution proves helpful for you!

Answer 4

I encountered a similar issue in the past and found a solution. Here's how you can identify it:

window.onload = function(){
    var input = document.getElementById('input1');
    input.src='';
    input.addEventListener('load', loadImage, false);
    input.src = 'http://theoffguard.net/wp-content/upLoads/2012/04/Nick-Cage.jpg';
}

function loadImage()
{
  console.log("Image has been successfully loaded");
}

DEMO: http://jsbin.com/ufovom/9/edit

I hope this solution proves helpful for you!

Answer 5

Answer №3

<input id="photo" type="image" ... onLoad="this.style.opacity = 1" />

  //script ->

  $("#photo").change(function () {
                if (this.files && this.files[0]) {
                var FR = new FileReader();
                FR.onload = function (e) {
                    //your custom onload function here
                };
                FR.readAsDataURL(input.files[0]);
            }
});

Answer 6

<input id="photo" type="image" ... onLoad="this.style.opacity = 1" />

  //script ->

  $("#photo").change(function () {
                if (this.files && this.files[0]) {
                var FR = new FileReader();
                FR.onload = function (e) {
                    //your custom onload function here
                };
                FR.readAsDataURL(input.files[0]);
            }
});

Answer 7

Answer №4

If you want to add an event listener using the reference of your input, you can use the addEventListener() method.

It's important to note that you should wait for the page to fully load before adding the event listener to the input. To do this, you can apply another event listener to the window object and then trigger the function that references your input.

Answer 8

If you want to add an event listener using the reference of your input, you can use the addEventListener() method.

It's important to note that you should wait for the page to fully load before adding the event listener to the input. To do this, you can apply another event listener to the window object and then trigger the function that references your input.

Finding image input loading

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Use a combination of the reduce and map functions in JavaScript to transform a one-dimensional array into a multi-dimensional array

React useEffect only retrieves the last element of an array object

The module specifier "logrocket" could not be resolved, make sure to use either npm or

How can the hreflang tag be used correctly in a React application that supports multiple languages?

Incorporating information into an HTML webpage

Looping through an array of nested objects using Vue

How to instantly return progress bar to zero in bootstrap without any animations

Is it possible to incorporate a label within a dropdown menu (<select>)?

Collision detection in Physisjs with Three.js PointerLockControls is an essential feature for creating

How can I execute a StoredProcedure using JavaScript?

When attempting to display an identical image on two distinct canvas elements in Angular 6

AngularJs - Show the response only upon verifying the correct answer

Transferring data as a JSON object from PHP to JavaScript

Creating a dynamic text design using Bootstrap or CSS: What's the best approach?

Mastering hot reloading in React when using Dotnet and DockerorAchieving seamless hot reloading in

Ways to decrease font size and insert a line break within a constrained input space?

What is the best way to store objects containing extensive binary data along with additional values?

Issue with div element not functioning properly within table declaration on Internet Explorer

How can we ensure that an enum is accessible throughout the entire meanjs stack?

Which element to use for creating a color palette - <img>, <div>, or <canvas>?