Is there a way for me to determine if an image created with Image() has had its source modified?

Is there a way to track changes in the src attribute of images created using the Image constructor on a webpage without needing the image to be fully loaded? I have attempted to override the Image.onload method, but it does not log anything:

Image.prototype.nativeOnload = Image.prototype.onload;
Image.prototype.onload  = function() {
  console.log(this.src);
  this.nativeOnload();
};

It seems that the onload property might be causing some issues. How can I achieve this using JavaScript without directly watching for changes?

javascript

Answer №1

THE FIRST CHOICE

The most straightforward option with minimal overhead is to incorporate a callback in the code that can modify the source of an image tag. This approach requires access to and the ability to make changes to the code itself.

A SECOND ALTERNATIVE

Another possibility is to establish a DOM event listener, although not all browsers may support this functionality.

DOMAttrModified

An earlier query on stackoverflow delves into this choice.

AN ADDITIONAL OPTION

A third method involves regularly checking the image source for any alterations compared to the previous assessment using an interval timer.

Explore a jsfiddle demonstration (click "change source" or adjust the source in firebug to test).

HTML

<img id="check" src="yourimagesource">

JavaScript

var check_img=$("#check");
var current_src=check_img.attr("src");


window.setInterval(function(){
    new_src=check_img.attr("src");
    if(current_src!=new_src){
        alert("src changed");
        current_src=new_src;
    }

}, 500);

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

Transformation of visuals with alteration of status

I am attempting to change the image of a door from closed to open when the status changes in my home automation dashboard. I need help with this task. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu ...

javascripthtmlcss

Ways to Increase jQuery Element ID

I have several instances of jPlayer (a jQuery audio player) set up: jPlayer1, jPlayer2, jPlayer3, jPlayer4. Each one is initialized and preloaded with audio files. The following function will loop through an existing array and attach a method to play the ...

javascriptjqueryincrement

Unable to invoke the jQuery function within CakePHP3

I am having trouble calling the jQuery function mentioned below in my CakePHP3 MVC project. There are no error messages, but nothing seems to be happening. The code is set up so that jQuery gets included automatically. The function I am trying to call sh ...

javascriptjqueryhtmlcakephp

Tips for creating ternary operator logic that account for numerous conditions and optional parameters:

Trying to create a logic for my validator functions that involves using objects as errorMaps for input validation. In the code snippet provided, args.drugName is an optional field. If the user provides text, we want to ensure it is greater than 3 letters; ...

javascriptangulartypescript

Exploring the concept of $http/$q/promise in Angular

I am struggling to understand when $q/$http should trigger the onReject block. For example, if I have a simple call like this: $http.get('/users') .then(function(res) { return res.data; }, function(err) { console.log(err); }); If ...

javascriptangularjspromiseangular-promiseangular-http

Displaying an HTML button above JavaScript code

Hello, I am currently working on a project that involves displaying the Earth and I am in need of assistance with positioning some buttons on the screen. Currently, I am facing an issue where the buttons appear either above or below the JavaScript code. I ...

javascriptcsshtmlweb

Guide to verifying a value within a JSON object in Ionic 2

Is there a way to check the value of "no_cover" in thumbnail[0] and replace it with asset/sss.jpg in order to display on the listpage? I have attempted to include <img src="{{item.LINKS.thumbnail[0]}}"> in Listpage.html, but it only shows the thumbna ...

javascripthtmltypescriptionic-frameworkionic2

The action 'onDeleteClick' cannot be executed as the property is undefined

Why is the onDeleteClick function working on the first <div>, but returning undefined on the second one? I am able to access the reference of this, but when clicking, it shows "onDeleteClick of undefined". I am confused as to why the onDeleteClick f ...

javascriptreactjs

A Guide to Implementing Inner CSS in Angular

I am working with an object named "Content" that has two properties: Content:{ html:string; css:string } My task is to render a div based on this object. I can easily render the html using the following code: <div [innnerHtml]="Content.html"& ...

javascriptangulartypescriptinnerhtml

HTML pages are free from any visible banner ads

There is a file named banners.js function addEvent(object, evName, fnName, cap) { if (object.attachEvent) object.attachEvent("on" + evName, fnName); else if (object.addEventListener) object.addEventListener(evName, fnName, cap); } ...

javascriptbanner-ads

Unexpected element layout issues

Attempting to create a basic website that utilizes the flickr api, retrieves photos and details, and displays them using bootstrap. However, there seems to be an issue that I am unsure how to resolve. Currently, my code is functioning like so: https://i.s ...

javascriptjqueryhtmltwitter-bootstrap

What steps do I need to take to ensure NextJS stores my edits in VSCode?

I have attempted various troubleshooting steps such as changing file extensions from .js to .jsx, turning on Prettier for formatting upon saving, setting it as the default formatter, reloading and restarting the editor. However, the issue with not being ...

javascriptvisual-studio-codenext.jsprettier

`How can I trigger a JavaScript event when the content of an input field is modified?`

Currently, I am working on implementing validation in JavaScript. My goal is to provide the user with an alert whenever they modify the value of an input field. <input type="text" name="onchange" id="onchange" size="35" maxlength="50" /> ...

javascripthtml

Is it necessary to encapsulate Factory calls within a function in my Controller file?

Typically, I call a Factory from my Angular controller directly within the controller function without creating a separate method. For instance: (function () { 'use strict'; angular.module("Dashboard") .controller("DashboardController", D ...

javascriptangularjs

Understanding how to utilize the scoped slot prop within a parent computed property

Currently, I have a closely connected pair of parent-child components utilizing a scoped slot. The child component sends data to the parent through a scoped slot prop (which we'll refer to as myScopedProp). Everything is functioning smoothly in this s ...

javascriptvue.jsvuejs3hierarchyslots

Utilizing a PHP-scripted multidimensional array in an AJAX success function

I've encountered an issue while trying to access a multidimensional array passed to my AJAX success function. Here's how I'm sending the data: $response = array(); $response['message']['name'] = $name; $response['m ...

javascriptphpjqueryajaxmultidimensional-array

Checking the existence of a user's email in Node.js

Hey there! I am new here and currently learning Node.js with Express. I'm trying to find a way to check if a user's email already exists in the database. Here is what I have so far: const emailExists = user.findOne({ email: req.body.email }); if ...

javascriptnode.jsexpressbackend

Import components exclusively from the root/app directory in Angular 2

In my angular2 project, I used angular-cli version 1.0.0-beta.8 and angular version 2.0.0-rc.3. After running ng new or ng init, the directory structure created is as follows: create .editorconfig create README.md create src\app\app.compon ...

javascriptangular

Accessing the URL causes malfunctioning of the dynamic routing in Angular 2

I am currently working on implementing dynamic routing functionality in my Angular application. So far, I have successfully achieved the following functionalities: Addition of routing to an existing angular component based on user input Removal of routin ...

javascriptangularangular2-routingangular-routingangular-router

Ways to loop through an array in a JSON object

Exploring methods of iterating through an array in json: $(document).ready(function(){ $('#wardno').change(function(){ //this code will execute whenever there is a change in the select with id country $("#wardname > ...

javascriptjqueryjson