progressive-image | image module for Vanilla JavaScript | Computer Vision library

I have a website full with images and the web site performance is so bad.

I want to make the images load blurry then on scroll event the images will bi loaded.

I'm using PHP and Zend framework

I'm searching for a java script library or php function that help me make an lazy load image but I wasn't able to find one that can be easy to use because I don't want to replace all the images manulay

I tried progressive-image.js the performance enhanced a little bit , my main goal is to make the minimum number of requests

is there any script that work the same as google images

i'v seen that code snippet

I am currently working on making an element progressive load so make the loading of hero banners more fluent, I came by this code example:

Codepen

The one I can't seem to understand is how the placeholder image is being switched to the original image.

The javascript does not seem to refer to original image at all? So how does it render it?

I am currently getting a white screen when I use the javascript, which makes sense as the blurred image becomes more opacity =1 =>

I have created a component for my project to help with some image loading. The component is working great for me however when trying to unit test I am running into some difficulties with the html Image api:

To start, my component is using the new Image(); syntax to load in some images, here is the component

I have a react component I am using to load my images progressively for my app which has been working great for me. When I use it on a page to load images, though, I am seeing an error:

warning.js:35 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.

Multiple times - looks like once for each image called. It does not seem to be effecting anything seriously as the image components still work. I am wondering how to get rid of this error though, I cannot figure out how.

So here is my component:

I am trying to display a JPEG image as it downloads like this library but its for IOS is there anything like this in android.

While R&D found this but its also for ios.

1) Right now i am using this way to load it works but the overhead is i have to load twice.

2) Also used fresco with .setProgressiveRenderingEnabled(true) but didt notice any major change.