Lazyload on click not respected when image inside viewport on load or window resize
See original GitHub issueThis may be a question, rather than an issue.
I have set the click event as a trigger for the lazyload,
$('#' + elemId).lazyload({event: 'click'});
but that only works when the image is “bellow the fold” on page load, if the image is in the viewport when the page is loaded, lazyload is triggered and the images are loaded without click event.
I understand that the code bellow is responsible for this behavior, it checks if the image is inside the viewport on document ready. I was wandering if there should be a check if the event is different than scroll so not to trigger this behavior. This also happens on window resize.
/* Force initial check if images should appear. */
$(document).ready(function() {
update();
});
function update() {
var counter = 0;
elements.each(function() {
var $this = $(this);
if (settings.skip_invisible && !$this.is(":visible")) {
return;
}
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)) {
/* Nothing. */
} else if (!$.belowthefold(this, settings) && <------- Right here
!$.rightoffold(this, settings)) {
$this.trigger("appear");
/* if we found an image we'll load, reset the counter */
counter = 0;
} else {
if (++counter > settings.failure_limit) {
return false;
}
}
});
}
Issue Analytics
- State:
- Created 7 years ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Lazyload on click not respected when image inside viewport ...
I have set the click event as a trigger for the lazyload,. $('#' + elemId).lazyload({event: 'click'});. but that only works when the image...
Read more >Lazy Loading Images – The Complete Guide - ImageKit.io
Lazy loading images that are not in the viewport improves initial ... The resize event occurs when the size of the browser window...
Read more >Increasing viewport on lazy load detection - Stack Overflow
I'm using this script to lazy load tags, I'm familiar with most of it but theres a section that I'm not quite sure...
Read more >Preventing Content Reflow From Lazy-Loaded Images
It prevents the browser from loading images until those images are in (or nearly in) the browser's viewport. There are a plethora of...
Read more >Browser-level image lazy loading for the web - web.dev
This post covers the loading attribute and how it can be used to control the loading of images.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I modified the update function, like bellow:
This is by design. If you only need to load images on click this plugin is quite moot. You could achieve load by click with something like: