Javascript-based image lazy loading

Source: Internet
Author: User
This article mainly introduces the methods and ideas for javascript to implement image lazy loading. Sometimes we need to use lazy loading, that is, to delay loading of images to improve the website's affinity, for more information, see the following definition.

Image delayed loading is also called lazy loading. It is used to load some images only when the image is delayed or meets certain conditions. It is usually used for webpages with many images. It can reduce the number of requests or the number of delayed requests and optimize the performance.

Ii. presentation form

[1] Delayed loading. setTimeout or setInterval is used for loading delay. If the user leaves before loading, the loading will naturally not be performed.
[2] Conditional loading: starts asynchronous loading only when certain conditions are met or certain conditions are triggered.
[3] The visible area is loaded, and only the area that the user can see is loaded. This is mainly implemented by the monitoring scroll bar. Generally, loading starts when the user sees the bottom edge very close, this ensures that the image will not be paused for a long time when the user pulls down the image.

3. Basic Steps

[1] All images on the webpage are set to the same image
[2] Add the data-original = "img/test.jpg" attribute to the image to save the real address of the image.
[3] when certain conditions are triggered, the src attribute of the image in the region is automatically changed to a real address.

Iv. Application

1. click the button to display the image

 DocumentAttach ImagesScript var oBtn = document. getElementsByTagName ('click') [0]; var oImg = document. images [0]; oBtn. onclick = function () {oImg. src = "img/loading.gif"; if (oImg. dataset) {aftLoadImg (oImg, oImg. dataset. original);} else {aftLoadImg (oImg, oImg. getAttribute ("data-original");} function aftLoadImg (obj, url) {var oImg = new Image (); oImg. onload = function () {obj. src = oImg. src;} oImg. src = url;} script

2. display images in the visible area

 Document
 
 
《script》var oBtn = document.getElementsByTagName('button')[0];var aImages = document.images;loadImg(aImages);window.onscroll = function(){ loadImg(aImages);};function loadImg(arr){ for( var i = 0,len = arr.length; i < len; i++){ if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){ arr[i].isLoad = true; arr[i].style.cssText = "transition: ''; opacity: 0;" if(arr[i].dataset){ aftLoadImg(arr[i],arr[i].dataset.original); }else{ aftLoadImg(arr[i],arr[i].getAttribute("data-original")); } (function(i){ setTimeout(function(){ arr[i].style.cssText = "transition: 1s; opacity: 1;" },16) })(i); } }}function aftLoadImg(obj,url){ var oImg = new Image(); oImg.onload = function(){ obj.src = oImg.src; } oImg.src = url;} 《script》

The above is all the content in this article. I hope it will be helpful for your learning and smooth javascript image lazy loading.

For more articles about javascript-based image lazy loading, refer to the PHP Chinese website!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.