Home Web Front-end JS Tutorial img onload event binding can be executed by all browsers_Basic knowledge

img onload event binding can be executed by all browsers_Basic knowledge

May 16, 2016 pm 05:46 PM
event binding

When you need to bind the onload event of img, generally everyone will think of using the conventional method to bind the event, as follows:

Copy code The code is as follows:





img onload event binding (wrong usage)
< script type='text/javascript'>
window.onload = function(){
var img = document.getElementById('imgId');
img.onload = function(){
alert(1);
};
};







At this time, you will find that alert(1) is not executed. What is the reason? Especially under ie and ff browsers.
And when using the jquery plug-in library, you will find that alert does not pop up in IE and Opera browsers, but it pops up in other browsers. Why is this? !
Mainly the window.onload event is executed after the page dom element is loaded, which also includes the completion of the src loading in the img image. Then img.onload will not be executed,
because it is monitoring whether the src of img is loaded.
So, how to bind the onload event to the img image? The specific code is as follows:
Copy code The code is as follows:




img onload event binding (correct usage)







This method executes alert(1) in every browser.
That is, after the dom element of the page is loaded, obtain the dom object of img, obtain its src attribute, then set its src to '' empty, then listen to the onload event of img, and finally set the src attribute of img. .
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How many ways are there to bind events in jquery? How many ways are there to bind events in jquery? Nov 09, 2020 pm 03:30 PM

There are 4 ways to bind events in jquery, namely: bind(), live(), delegate() and on() methods; the bind() method can only bind events to existing elements, while the live() ), on(), and delegate() all support event binding for newly added elements in the future.

Solve the problem of UniApp error: 'xxx' event is not bound Solve the problem of UniApp error: 'xxx' event is not bound Nov 25, 2023 am 10:56 AM

When developing applications using UniApp, you may encounter the following error message: 'xxx' event is not bound. This is caused by UniApp's event binding mechanism, which needs to be set correctly to solve this problem. 1. Cause of the problem In UniApp, event binding of page components is completed through the v-on instruction. For example, add a button component to the template: &lt;button@click="onClick"&gt;Click me&lt;/butto

How to add events to elements? Three ways to parse JS binding events How to add events to elements? Three ways to parse JS binding events Aug 04, 2022 pm 07:27 PM

As a scripting language, JavaScript can bind events to elements on the page, so that when a specified event occurs, the corresponding event handler can be automatically called to handle the event. So how to add events to elements? The following article will introduce to you three ways to bind events in JS. I hope it will be helpful to you!

An in-depth discussion of jQuery event binding technology An in-depth discussion of jQuery event binding technology Feb 26, 2024 pm 07:36 PM

jQuery is a popular JavaScript library that is widely used to handle interactivity in web pages. Among them, event binding is one of the important functions of jQuery. Through event binding, responses to user interactions can be achieved. This article will explore jQuery event binding technology and give specific code examples. 1. The basic concept of event binding Event binding refers to adding an event listener on a DOM element to perform specified operations when a specific event occurs. In jQuery, select the desired

What is the function of jquery binding event What is the function of jquery binding event Mar 20, 2023 am 10:52 AM

The function of jquery binding event: Bind ordinary events to DOM nodes. When the DOM node is selected, bind the event to it to facilitate users to provide corresponding operations. jQuery provides four event binding methods, namely bind, live, delegate, and on, and the corresponding unlistening functions are unbind, die, undelegate, and off.

What should I do if the 'click' event binding is invalid in my Vue application? What should I do if the 'click' event binding is invalid in my Vue application? Jun 24, 2023 pm 03:51 PM

Vue is a popular JavaScript framework for building modern web applications. In Vue, we usually use directives to operate DOM elements. Among them, the "click" event is one of the commonly used instructions. However, in Vue applications, we often encounter situations where the "click" event binding is invalid. This article explains how to solve this problem. The first step in checking whether an element exists is to confirm whether the element to which you want to bind a "click" event exists. If the element does not exist,

How to use event binding function parameters in Vue documentation How to use event binding function parameters in Vue documentation Jun 20, 2023 pm 02:06 PM

Vue is a popular JavaScript framework that uses data-driven ideas to simplify the development process. Vue's event binding function is very powerful and can handle various interactions on the page. In the development process of Vue, event binding function parameters are often used. This article will introduce the use of this function in detail. In Vue, you can use the v-on directive to bind events. The v-on directive is followed by the event name and event handling function, for example: &lt;bu

In-depth analysis of jQuery event binding techniques In-depth analysis of jQuery event binding techniques Feb 26, 2024 pm 06:33 PM

jQuery is a popular JavaScript library that simplifies many common tasks in web development, including element selection, DOM manipulation, and event handling. In jQuery, event binding is one of the very common and important operations. This article will explore the event binding methods in jQuery in detail, and use specific code examples to help readers better understand and apply these methods. 1.bind() method The bind() method is one of the most traditional and commonly used event binding methods. it can

See all articles