Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I get jQuery to call an event handler when an image actually appears on-screen?

How can I use jQuery to trigger a callback of a JavaScript function when I scroll down and see a picture? I wish to delay loading certain images until they actually appear on-screen... Ideally, I'd be able to do something like:

$('#img#').look_on() { ...

So no images are loaded apart from those I have seen.

like image 492
e382df99a7950919789725ceeec126 Avatar asked Jan 17 '10 00:01

e382df99a7950919789725ceeec126


People also ask

Which event handler is available for the image object?

In addition to the onLoad() event handler, the Image object also supports two others. The onError() event handler is invoked when an error occurs during image loading, such as when the specified URL refers to a corrupt image data.

Can you add event listener to image?

To handle the load event on images, you use the addEventListener() method of the image elements. You can assign an onload event handler directly using the onload attribute of the <img> element, like this: <img id="logo" src="logo.

Which jQuery method is used to attach a handler to an event?

Commonly Used jQuery Event Methods The click() method attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element.

What method in jQuery which is used to point a specified event handler on to a selected element?

bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to . bind() occurs.


2 Answers

I think this JQuery Event Plugin does what you need:

Element 'in view' Event Plugin

I've created an event that will trigger when the element is scrolled in to the viewport.

also, the LazyLoad Plugin seems to have a "viewport" selector for JQuqery: Here.

like image 53
Pekka Avatar answered Oct 27 '22 23:10

Pekka


Here is some kind like what i searched for... http://www.appelsiini.net/projects/lazyload

like image 26
e382df99a7950919789725ceeec126 Avatar answered Oct 27 '22 21:10

e382df99a7950919789725ceeec126