Custom solution for lazy loading images in javascript (Without frameworks);
- For each image, you need to have both a 'compressed' and an 'original' src. (Compressed should be smaller (up to 30kb))
- At the beginning, each image should have 'compressed' for the src attribute and 'original' for the 'data-original-src' attribute, in full quality. (They will be replaced later)
- The image should have 'data-lazy="true"' if you want it to have lazy loading functionality
--------------------------------------------------
This code implements functionality to display a loader over an image if the user has a slow internet connection (after 0.3s, if the image hasn't loaded).You can customize the loader to your preference and also edit a variable value to determine when the user's internet is slow