首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用jQuery live()进行img onload事件?

在使用jQuery的live()方法进行imgonload事件时,需要注意以下几点:

  1. live()方法已经在jQuery 1.9版本中被弃用,建议使用on()方法代替。
  2. 由于img元素的onload事件在页面加载时可能已经触发,因此需要在img元素的src属性设置之前先绑定事件。
  3. 在使用on()方法时,需要将事件委托给img元素的父元素,并且使用img选择器作为第二个参数。

以下是使用on()方法进行imgonload事件绑定的示例代码:

代码语言:javascript
复制
$('body').on('load', 'img', function() {
  // 在这里编写img的onload事件处理逻辑
});

// 在这里设置img元素的src属性
$('img').attr('src', 'image.jpg');

在这个示例中,我们将事件委托给了body元素,并且使用了img选择器作为第二个参数。在设置img元素的src属性之前,先绑定了onload事件处理逻辑。这样可以确保在img元素的onload事件触发时,事件处理逻辑已经被绑定。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用jQuery操作浏览器窗口事件?【jQuery框架应用入门15】

这些事件在浏览器窗口比较直观,但实际上这两种情况也可以发生在html元素的某个节点上。本节以较为直观的浏览器窗口事件为例来说明jQuery中窗口事件使用。案例源代码: <script src="js/<em>jquery</em>...中的scroll<em>事件</em>是当滚轮出现时,用户<em>使用</em>鼠标滚轮滚动或者点击滚动条滚动才会发生的<em>事件</em>。...当在<em>使用</em>resize<em>事件</em>的时候,要注意检测浏览器窗口要将节点绑定到window上,而不是document节点。 当<em>使用</em>scroll滚动<em>事件</em>的时候,绑定<em>事件</em>的容器要有滚动条变化才会发生。...根据业务需要,有时候在没有滚动条情况下要触发鼠标滚动<em>事件</em>,如在页面中实现图片切换效果,就要回归<em>使用</em>JavaScript的方式将document绑定到mousewheel<em>事件</em>上。

8710

$(document).on和$(#idname).on和$(function(){ })区别

$(function(){ })的使用   JQuery 的代码我们通常会包裹在一个(function(){})函数中,jq 的(function(){})也就是 $(function () {...; $('ul').append('56'); })   结果如下: 后面动态创建的5和6,没法进行点击事件触发...1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。     ...$().bind()直接绑定在元素上,和click,blur,mouseon一样的点击事件。     $().live()是通过冒泡的方式来绑定到元素上的。...触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。   3. 阻止事件冒泡和事件委托的方法:     A:return false。

2.1K20
  • JS判断单、多张图片加载完成

    试想,如果模板中有图片,此时如何判断图片是否加载完成? 在此之前来了解一下jquery的ready与window.onload的区别,ready只是dom结构加载完毕,便视为加载完成。...事件,但支持onreadystatechange事件; 2、readyState是onreadystatechange事件的一个状态,值为loaded或complete的时候,表示已经加载完毕。...[i] = new Image() img[i].src = mulitImg[i] img[i].onload = function(){ //第i张图片加载完成...[i] = new Image() img[i].src = mulitImg[i] img[i].onload = function(){...//全部加载完成 }) ---- 往期精选文章 ES6中一些超级好用的内置方法 浅谈web自适应 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划

    12.5K20

    如何使用EvtMute对Windows事件日志进行筛选过滤

    写在前面的话 在这篇文章中,我们将告诉大家如何使用EvtMute来对Windows事件日志进行筛选过滤。...EvtMute这款工具允许我们使用YARA来进行攻击性操作,并对已经报告给Windows事件日志的事件进行过滤和筛选。...工具使用 EvtMuteHook.dll中包含的是该工具的核心功能,成功注入之后,它将会应用一个临时过滤器,允许报告所有事件,这个过滤器可以动态更新,而不必重新注入。...禁用日志记录 最常见的EvtMute使用场景就是禁用系统范围内的事件日志记录了,此时我们可以应用下列Yara规则: rule disable { condition: true } 此时,我们首先需要通过向事件...这个规则可以使用Linux命令行终端轻松转换为Base64编码规则: base64 -w 0 YaraFilters/lsassdump.yar | echo $(</dev/stdin) 接下来,可以使用

    88110

    window的onload事件和domcontentloaded执行顺序

    支持该事件的 HTML 标签:, , , , , , ; 支持该事件的 JavaScript 对象:image..., layer, window 对于这些标签比如iframe 、img 、script标签,image对象等等,我们用的很多,都是在相应的元素加载完成之后执行的事件。...jQuery的load事件 $(document).ready()或者$(function(){})是经常使用的,其原理都是使用了类似DOMContentLoaded。...可以在jQuery使用查看此事件$( window ).on( "load", handler )。如果代码依赖于加载的资源(例如,如果需要图像的尺寸),则应将代码放在load事件的处理程序中。...所以jq的ready事件执行结束时间和DOMContentLoaded结束时间并不是完全相同的,所以在使用过程中应当进行一些注意。

    3.7K10

    onload 和 domready

    事件就会迟迟无法触发 所以出现了 DOM Ready 事件 熟悉 jQuery的人,都知道 DomReady 事件 $(document).ready(function(){ alert("jQuery... 事件onload 事件快许多,它是在 DOM 准备完毕后触发(不需等待资源下载完毕) DOMContentLoaded 事件在许多 Webkit 浏览器以及 IE9 上都可以使用,此事件会在 DOM...准备完毕,资源还没加载完"); }) // 在 document 文档加载完成后就可以对 DOM 进行操作(即所有元素的资源都下载完毕) window.onload = function(){...dom 进行操作,比如加载一张图片,要等这个图标加载完成之后才能设置图片的宽高的属性或样式等; onreadystatechange 事件 onreadystatechange 事件onload...script 元素支持 onreadystatechange 事件,不支持 onload 事件 在 IE 下,可以使用 onreadystatechange 完成 onload 事件,判断 readyState

    2.7K20

    jQuery中find&filter、live&bind对比介绍及图片懒加载

    live方法之所以能对后生成的元素也绑定相应的事件的原因归结在"事件委托"上面,所谓"事件委托"就是指绑定在祖先元素上的事件可以在其后代元素上进行使用。...相比之下,bind会在事件在绑定阶段就会判断绑定事件的元素是否存在,而且只针对当前元素进行绑定,而不是绑定到父节点上。 根据上面的分析,live的好处真是很强大,那么为什么还要使用bind方法呢?...取而代之的是,应当总是在一个选择器后面直接使用 .live() 方法。 3....当一个元素采用live方法进行事件的绑定的时候,如果想阻止事件的传递或冒泡,就要在函数中return false,仅仅调用stopPropagation()是无法实现阻止事件的传递或者冒泡的 三、 图片懒加载... 因为是使用javascript来加载图片,如果用户禁用了javascript

    70631

    2024全网最全面及最新且最为详细的网络安全技巧 七之 XSS漏洞典例分析POC以及 如何防御和修复(5)———— 作者:LJS

    前,对这个字符串进行了正则替换,移除其中的onload=关键字。...> 3.2 details 异步事件ontoggle,在黑名单删除details标签前,就已经将ontoggle事件加载进事件队列中,即使删除也会执行....其中,后者能够成功的关键在于,一些恶意的事件在设置innerHTML的时候就瞬间触发了,即使后面对其进行了删除操作也无济于事。...在本文中,我将向您展示,如何通过使用深奥的网络功能将其缓存转换为漏洞并利用传送系统来破坏网站,受众是任何能在请求访问其主页过程中制造错误的人。 我将通过漏洞来说明和开发这种技术。...方法 我们将使用以下方法查找缓存投毒漏洞: 我并不想深入解释这一点,下面将快速概述再演示它如何应用于真实的网站。 第一步:识别非缓存键部分的输入。

    8610

    Web阶段:第五章:JQuery

    Jquery 的初体验 需求:使用Jquery和javascript给一个按钮绑定单击事件 注意:使用Jquery之前要将第三方jar包导入 <!...//使用Jquery给一个按钮绑定单击事件Jquery中的$()代替window.onload // alert($); // 测试jquery引入是否成功!...**bind()** 可以同时给标签绑定一个或多个事件 **one()** 给标签绑定只响应一次的事件 **live()** live可以给匹配了选择器的所有元素都绑定事件,哪怕这个元素是后面动态创建的...事件的冒泡是指,父子元素同时监听同一个事件。当触发子元素的事件的时候,同一个事件也被传递到了父元素的事件里去响应。 那么如何阻止事件冒泡呢?...我们重点关心的是怎么拿到这个javascript的事件对象。以及使用如何获取呢javascript事件对象呢?

    26.3K20

    JavaScript异步编程1——Promise的初步使用

    为了解决这个问题,使用JavaScript作为脚本的浏览器一般都会采用事件循环(Event Loop)的机制: 将耗时的行为规定为事件事件与响应回调函数绑定。 每个循环,优先处理同步代码。...= new Image(); img.onload = function () { $(img).appendTo($('#container'));.../img.jpg"; }); 为Image的事件句柄onload,添加一个相应函数,当图像装载完成之后,就将装载好的Image添加到HTML页面的某个div元素子节点下。...= new Image(); img.onload = function () { resolve(img); };...可以看到,这样的设计看起来很繁复,但是却很像是一个同步行为:规定一个未完成行为对象,行为完成了如何处理,行为失败了又如何处理。而这也是Promise的目的:使得异步操作更像是一个同步的行为。 3.

    74440

    前端如何上传文件

    然后,可以在自定义按钮上绑定点击事件,在这个点击事件里面对原生上传按钮进行操作,可以像下面这样: let file = document.querySelector('#fileInput'); file.click...通过实例化一个FileReader,调它的readAsDataURL并把File对象传给它,监听它的onload事件,load完读取的结果就在它的result属性里了。)...} } // 调用reader进行读取 reader.readAsDataURL(file); 第二种拖拽的方式 我们需要监听拖拽事件: $(".img-container").on("dragover...,最后得到: FormData格式 FileReader读取得到的base64二进制格式 如果不使用jQuery,没有问题,直接使用ajax发送就好;如果使用jQuery,要设置两个属性为false,...因为jQuery会自动把内容做一些转义,并且根据data自动设置请求mime类型,这里告诉jQuery直接用xhr.send发出去就行了。

    1.9K10

    前端基础-jQuery简介

    这些库还会把一些常用的代码进行封装。 把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。...jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。...3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678) 国内多数网站还在使用1.x的版本 [jQuery官网](http:// jquery.com...比如 遍历数组对象的 $.each() 相当于for循环 1.6 jQuery中页面加载事件 使用jQuery的三个步骤: 引入jQuery文件 入口函数(定义页面加载事件) 功能实现 关于jQuery...入口函数与window.onload的对比 JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。

    76410

    50个必备的实用jQuery代码段

    jQuery 判断元素上是否绑定了事件 //jQuery event封装支持判断元素上是否绑定了事件,此方法只适用于jQuery绑定的事件 var $events = $("#foo").data("events...: "a-class another-class", title: "..." }); 如何使用多个属性来进行过滤 //在使用许多相类似的有着不同类型的input元素时, //这种基于精确度的方法很有用...它存在…… } 如何使用jQuery来检测右键和左键的鼠标单击两种情况: $("#someelement").live('click', function(e) { if( (!...jQuery注册和禁用jQuery全局事件 //jQuery注册ajax全局事件ajaxStart,ajaxStop: $(document).ajaxStart(function(){ $("#background...Has Been Loaded'); }); 如何使用jQuery来为事件指定命名空间: //事件可以这样绑定命名空间 $('input').bind('blur.validation', function

    6.7K00
    领券