Code has been added to clipboard!

jQuery .load(): Get to Know This Deprecated Method

Reading time 2 min
Published Jan 8, 2018
Updated Oct 10, 2019

jQuery load: Main Tips

  • The now removed jQuery .load() method attached an event handler to the load event.
  • The load event triggers when an element and all the sub-elements related to it finish loading.
  • You can still use the AJAX .load() method in jQuery. However, despite the same name, it has a different purpose, so don't confuse the two!

Usage and Syntax of .load()

The .load() jQuery method attached an event handler that executed a function when the specified element was fully loaded. Using the example below, an alert would have popped up when the page finished loading:

Example
$("window").load(function(
{
	alert("The window has loaded!");
});

As you can see, the jQuery .load() function followed rather simple syntax:

$("selector").load(function);

Basically, jQuery .load() was a shortcut for using the .on() method with its parameters defined as "load", handler. You can still use this syntax to achieve the same result.

Note: the jQuery .load() method was deprecated in jQuery 1.8 and removed completely in jQuery 3.0.

Don't Get Mixed Up: .load() by AJAX

You cannot use the jQuery .load() method for event handlers now. However, you can use a method with the same name to get data from a server. While the name might add to confusion, this .load() is actually an AJAX method.

Before the event handling .load() method was removed, jQuery chose which of the two to execute based on the defined arguments. The currently unsupported method took just one (function), and the AJAX method takes three (a required URL, plus the optional data and callback).

Learn jQuery
Introduction
Selectors
Events
Event Methods
Download
Callback
Chaining
Get and Set
Add Element
Remove Element
Traverse
Parent
Children
Sibling Traverse
Filtering
jQuery AJAX
Effects
Show and Hide
Fade Effect
Slide Effect
Animate Effect
Manipulate CSS
Width and Height
.addClass()
.after()
.animate()
.append()
.appendTo()
.attr()
.before()
.bind() (deprecated)
.blur()
.change()
.click()
.clone()
.css()
.dblclick()
.delay()
.delegate() and .undelegate() (deprecated)
.detach()
.empty()
.end()
.error() (deprecated)
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
.finish()
.focus()
.focusIn()
.focusOut()
.hasClass()
.height()
.hide()
.hover()
.html()
.innerHeight()
.innerWidth()
.insertAfter()
.insertBefore()
.keypress()
.keyup()
.live() and .die() (deprecated)
.load() (deprecated)
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.off()
.offset()
.offsetParent()
.on()
.one()
.outerHeight()
.outerWidth()
.position()
.prepend()
.prependTo()
.prop()
.proxy()
.queue()
.ready()
.remove()
.removeAttr()
.removeClass()
.removeProp()
.replaceAll()
.replaceWith()
.resize()
.scroll()
.scrollLeft()
.scrollTop()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.submit()
.text()
.toggle()
.toggleClass()
.trigger()
.triggerHandler()
.unbind() (deprecated)
.unload() (deprecated)
.unwrap()
.val()
.width()
.wrap()
Event Properties
event.currentTarget
event.preventDefault()
event.relatedTarget
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
jQuery .find()
jQuery .keydown()
jQuery.noConflict()
pageY and pageX