Lazy loading

1. What is lazy loading?

Lazy loading is lazy loading. When visiting a page, replace the background image path of the IMG element or other elements with the path of a 1*1px image (so you only need to request it once), and only set the true image path to display when the image is in the browser’s viewable area. This is lazy loading of images.

2. Why lazy loading?

A lot of pages, very rich content, very long pages, more pictures. For example, various mall pages. These pages picture number, and relatively large, say less than a hundred to K, more on the megabytes. If the page loads, it loads all at once. I think everyone’s gonna wait until the yellow flower turns into a day lily.

3. What is the principle of lazy loading?

The img element in the page, without the SRC attribute, will not be requested by the browser to download the image. The browser will only send the request if the image path is set in javascript. Lazy loading principle is to use a placeholder map for all the pictures in the page, the real path exists in the element “data-URL” (this name is a good way to remember their own knowledge) attribute, when to use to take out, and then set;

4. Implementation steps of lazy loading?

1) First, do not put the image address in the SRC attribute, but in another attribute (data-original). 2) After the page is loaded, determine whether the picture is in the user’s field of view according to scrollTop. If so, take out the value in data-original attribute and store it in SRC attribute. 3) Repeatedly judge whether the picture enters the field of view in the scrolling event. If so, take out the value in the data-original attribute and store it in the SRC attribute.

5. What are the advantages of lazy loading?

Page loading speed, can reduce the server pressure, save traffic, user experience is good

// Lazy loading code implementation
var viewHeight = document.documentElement.clientHeight // The height of the viewing area

function lazyload () {
  // Get all images for lazy loading
  var eles = document.querySelectorAll('img[data-original][lazyload]')
  Array.prototype.forEach.call(eles, function (item, index) {
    var rect
    if (item.dataset.original === ' ')
      return
    rect = item.getBoundingClientRect()
    // The image is loaded dynamically once it enters the viewable area
    if (rect.bottom >= 0 && rect.top < viewHeight) {
      !function () {
        var img = new Image()
        img.src = item.dataset.original
        img.onload = function () {
          item.src = img.src
        }
        item.removeAttribute('data-original')
        item.removeAttribute('lazyload')}()}})}// The first screen should be manually called, otherwise the image will not be displayed when entering the page
lazyload()

document.addEventListener('scroll', lazyload)
Copy the code

preload

The key points of preloading are as follows:

1. Request in advance for static resources such as pictures before use;

2. Resources can be loaded from the cache for subsequent use to improve user experience.

3. Page display dependency maintenance (the page can be displayed only after necessary resources are loaded to prevent white screen, etc.);

There are three main ways to achieve preloading:

1. The img tag in HTML was originally set to display: None;

2. Create a picture dynamically using image object in js script;

3. The XMLHttpRequest object provides more fine-grained control over the preloading process. The disadvantage is that it cannot cross domains:

1. What is preloading?

Images are pre-loaded and rendered directly from the local cache when the user needs to view them

2. Why use preloading?

Images are pre-loaded into the browser, so visitors can surf your site and enjoy extremely fast loading times. This is great for image galleries and sites that have a high proportion of images, as it ensures fast and seamless distribution of images, and helps users have a better user experience when navigating your content.

3. What are the methods of preloading?

Method 1: Use CSS and JavaScript to implement preloading method 2: use JavaScript only to implement preloading method 3: use Ajax to implement preloading

See: web.jobbole.com/86785/

Lazy loading vs. preloading

1) concept:

Lazy loading is also called lazy loading: JS images are loaded lazily or some images are loaded only when certain conditions are met. Preloading: Images are loaded ahead of time and rendered directly from the local cache when the user needs to view them.

2) the difference between:

The essence of two technologies: the behavior of both is opposite, one is early loading, one is slow or even not loading. Lazy loading relieves the pressure on the front end of the server, while preloading increases it.

3) The meaning and implementation of lazy loading are as follows:

Meaning:

The main purpose of lazy loading is to serve as a front-end optimization for the server, reducing the number of requests or delayed requests.

Implementation method:

1. The first type is pure lazy loading. SetTimeOut or setInterval is used for loading delay. The second is conditional loading, where certain conditions are met or certain events are triggered before the asynchronous download begins. 3. The third is visual area loading, that is, loading only the area that the user can see. This is mainly realized by monitoring the scroll bar.

4) The meaning and realization of preloading are as follows:

Meaning:

Preloading can be said to sacrifice the front-end performance of the server for a better user experience, so that users can get the fastest response to the operation.

Implementation method:

There are many ways to achieve preloading, such as using CSS and JavaScript to achieve preloading; Use JavaScript only for preloading; Use Ajax for preloading. New Image(); Set its SRC to preload, and call back the preload completion event using the onload method. As soon as the browser downloads the image locally, SRC also uses caching, which is the most basic and practical method of preloading. After the Image header is downloaded, the width and height are obtained, so the size of the Image can be obtained before preloading (by using a timer to rotate the width and height).

Supplement knowledge

Screen viewable window size

Native methods:windowThe innerHeight standard browser and Internet explorer 9 + | |document. The documentElement. ClientHeight standard browser and low version of IE standard mode | |document.body. ClientHeight; jQuery method: $(window).height();
Copy the code

The distance between the top of the browser window and the top of the document, which is how far the scroll bar scrolls:

Native methods:window. PagYoffset standard browser and Internet explorer 9 + | |document. The documentElement. Low scrollTop compatible with ie version of the standard model | |document.body.scrollTop compatible promiscuous mode; JQuery method: $(document).scrollTop();
Copy the code

Gets the size of the element

$(o).width() = o.style.width; $(o).innerWidth() = o.style.width+o.style.padding; $(o).outerWidth() = O.ffsetwidth = O.style.width + O.style.padding + O.style.border; $(o).outerWidth(true) = grown tyle. Width + grown tyle. Padding + grown tyle. Border + grown tyle. Margin;Copy the code

Gets the location information for the element

Native: getoffsetTop (); By the way, return the offset of the element relative to the first parent element. Note the difference; $(o).position().left = o.style.left; </code><br><code>$(o). The position (). The top = grown tyle. The top; JQuery: $(o). Offset (). The top</code>Distance between the element and the top of the document <br><code>$(o).offset(). Left Distance between the element and the left edge of the document.Copy the code