search

mattkatt / simple-lazyload

A simple JS to lazy load images, videos and background-images
GNU General Public License v3.0
2 stars 3 forks source link

is there an event? #1

Open aalfiann opened 3 years ago

aalfiann commented 3 years ago

Is this library have an event like before loading or after loading?

mattkatt commented 3 years ago

Hi @aalfiann, I'm afraid this code isn't anywhere as complex as most third-party libraries - it's primary purpose is for simple, low-code sites to offer lazy-loading of images at the cost of including a small 1kb minified file in their load. As such, there are no event hooks to utilise before or after loading events; it simply runs whenever one of the following native JS events occurs:

    "load",
    "orientationchange",
    "resize",
    "scroll"

Whenever one of these events occurs, the code collects up all the images that currently have the class of lazyload and compares their position with the bottom of the web browser - if the top of the image is less than 200px* below the web browser, it replaces the image's src attribute with whatever is declared in data-src, then it removes the lazyload class from that image so that it is not considered the next time a triggering event occurs.

Hopefully this information will help you in adapting the code to your needs. If you're looking to use this code with a larger framework, such as Vue or React, I would recommend looking for an alternative solution more suited to those frameworks.

I may look at writing a more library-focused version of this code in the future that can be imported into a project via npm or similar, but right now I have no plans to do so.

*This value can be redefined by defining offset when using the script or code

aalfiann commented 3 years ago

OK, I get it, but still confuse how do I know if one of images has fail to render?

Thanks..

aalfiann commented 3 years ago

But if there are an event like afterloading or lazyloaded will be makes this library better, because sometimes user want to redraw the loaded image into canvas or doing something else on the fly..