LazyLoad for post images

LazyLoad and mChat - LazyLoad for post images

LazyLoad and mChat

by PRORS » Wed Jan 16, 2019 6:46 pm

Hello,

It seems that when both extensions are used, images are not displayed in mChat when posted. Once the page is refreshed image is visible.
When LazyLoad is disabled this does not occur.
Is it possible to fix this, because we really like LazyLoad :shock:
PRORS
Registered User
Posts: 19
Joined: Fri Nov 13, 2015 7:06 pm
Contact:

Re: LazyLoad and mChat

by mrx1983 » Mon Dec 02, 2019 9:06 pm

i have the same problem. the images will not appear if one make a new chat message. i think the problem is, that the lazyload function registers all the images at the beginning and then constantly checks if some of them appear in the viewarea. but if you make a new chat message this function not registers that there is now an additional image. i don't know, maybe there is a way to tell lazyload that it should recheck because there are now new images.
mchat is a very popular extension so it would be nice to make it work together with lazyload.
User avatar
mrx1983
Registered User
Posts: 8
Joined: Mon Dec 02, 2019 8:53 pm
Contact:

Re: LazyLoad and mChat

by mrx1983 » Thu Dec 05, 2019 2:11 pm

maybe it is from interest to some people, i coded a solution to my problem.
the spoiler extension was also affected, so i tried a little different approach.

i completely rewrote the javascript part from scratch:
<ext/rubencm/lazyload/styles/all/js/jquery_lazyload/jquery.lazyload.js>

Code: Select all

function lazyload()
{
 let elements=document.getElementsByClassName('postimage');
 for(let i=0;i<elements.length;i++)
 {
	let element=elements[i];
	let rect=element.getBoundingClientRect();
	if(rect.top < window.innerHeight && rect.bottom > 0)
	{
		if(element.getAttribute('src')!=element.getAttribute('data-original'))element.setAttribute('src',element.getAttribute('data-original'));
	}
 } 
}

window.addEventListener('scroll', lazyload, true);
window.addEventListener('resize', lazyload);

let mutationObserver = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if(mutation.target.id=='mchat-messages')lazyload(); //mchat
    else if(mutation.target.className=='spoiler spoiler-show')lazyload(); //spoiler
  });
});

mutationObserver.observe(document.documentElement, {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

document.addEventListener("DOMContentLoaded", function(event) {
lazyload();
});

and i changed a bit of the template modifications:

<ext/rubencm/lazyload/styles/all/template/event/overall_header_head_append.html>

Code: Select all

<style type="text/css">
	img.postimage {
		/*display: none;*/
	}
</style>
<ext/rubencm/lazyload/styles/all/template/event/overall_footer_after.html>

Code: Select all

<script type="text/javascript">
// <![CDATA[
	$(function() {
		//$("img.postimage").show().lazyload();
	});
// ]]>
</script>

<!-- INCLUDEJS ../js/jquery_lazyload/jquery.lazyload.js -->

it basically uses an scroll event listener that not only covers the window scroll event, but also covers scroll events from other areas of the site (like mchat).
it uses an observer to check if something is happening to the mchat posting area, or if something happens to the spoiler.
it checks if something appears if you scroll down and if you scroll up (both directions / up and down).
it always checks every image on the site, even those who are new (like if something is inserted from mchat).
its probably a very simple approach, maybe not the best for the performance or other things, but it runs great on my site.
User avatar
mrx1983
Registered User
Posts: 8
Joined: Mon Dec 02, 2019 8:53 pm
Contact: