Large image loads, small image(very briefly), then large image again

[bosz]

Hi,

Awesome plugin you have hear. Am really loving it. But i have this problem.

When i load the page (force reload without cache), this is what i experience

1. It loads the large image for some few seconds
2. It then shows the tiny image (for a fraction of a second), very fast
3. Then, it finally shows the large image again.

This twitch causes an undesired effect to the users and its not good for my website.

Trying to follow up with network elements on my chrome, i noticed the large image is loaded first before the smaller image, i don't know if am doing something wrong.

My code is structured like so

// Load css stylesheets
...
// Render image
<img 
	class="antimoderate-img img-fluid" 
	src="{{ asset($image->img_path) }}" 
	data-antimoderate-idata="{{ asset($image->thumbnail_img) }}" 
	alt="{{$a_listing->headline}}" 
	title="{{ $a_listing->headline }}" 
	>
...
// Load jquery and other plugins then load antimoderate plugin
// in one of the custom js files, i call the antimoderate plugin like so 
if (AntiModerate !== undefined && $ !== undefined) {
    var antimoderateImgs = document.getElementsByClassName('antimoderate-img');
    for (var i = 0; i < antimoderateImgs.length; i++) {
        var aImg = antimoderateImgs[i];
        AntiModerate.process(aImg, aImg.getAttribute("data-antimoderate-idata"));
    }
}else{
    $().toastmessage('showToast', {
        text:       'Smooth image loading is not loaded/supported by your browser', 
        stayTime:   10000,
        type:       'warning',
    });
}