.load()
分类:建议弃用 > 建议弃用于1.8 | 事件 > 文档载入
描述:把某个事件处理函数绑定到JavaScript事件“load”上。
该方法是.on( "load", handler )
的简写。
网页上当一个元素和它的所有的子元素完全载入时,load
事件就发送到这个元素上了。这个事件可以发送到任何与一个url有关联的元素上:<image>、<script>、<frames>,以及windows
对象。
举个例子,设想一个带有一张图片的网页:
<img src="book.png" alt="Book" id="book">
该事件处理函数被绑定到图像上:
$( "#book" ).load(function() { // Handler for .load() called. });
一旦图像已经载入,就会调用处理函数。
一般情况下,不需要等待所有的图像完全载入。如果代码可以更早执行,通常最好把它放到一个发送到.ready()
方法的处理函数中。
Ajax模块也有一个方法,名为.load()
。jQuery会根据传递给它的参数的设置来确定要引发哪种方法。
在图像上使用load
事件的注意事项
使用.load()
简写,开发员们试图解决的一个常见挑战是,当一个图像(或者一个图像集合)完会载入时,执行一个函数。关于它,有一些已知的注意事项。即:
- 它不能一致性地起作用,或者可靠地跨浏览器起作用。
- 在WebKit中,如果图像的src被设置为和之前相同的src,则不会正确地引发该事件处理函数。
- 它不能正确地沿着DOM树向上冒泡。
- 如果图像已经驻留在浏览器的缓存中,可能不会引发处理函数。
注意: 注意,.love()
方法和.delegate()
方法不能用来侦测一个<iframe>的load
事件。load事件上能正确地向上冒泡到父document,而且Firefox浏览器、IE9或Chrome浏览器不能设置event.target,而event.target是做事件委托必不可少的。
示例
当网页,包括图像在内,完全载入的时候,运行一个函数。
$( window ).load(function() { // Run code });
当每个图像载入时,把样式类bigImg添加到所有的高度大于100像素图像上。
$( "img.userIcon" ).load(function() { if ( $( this ).height() > 100) { $( this ).addClass( "bigImg" ); } });