Lazy loading and preloading of images (ultra Simplified version code)

Lazy loading and preloading of images

Because the image content occupies a large memory, so the optimization of the image loading process is a very important means to improve the user, lazy loading and preloading is the most commonly used way.

Lazy loading means that if a page has multiple photos that need to be displayed, instead of loading them all at once, we dynamically load only a portion of the images associated with the view window. The advantage is that it can reduce the waiting time to enter the page and ensure that the window pictures load first; Preloading is the process of loading pages and images in anticipation of what the user will do next, with the benefit of smoother switching and less white screens and chrysanthemums

Lazy loading (jQuery)

Implementation approach

1. Because in HTML5, custom attributes starting with data- are legal, the SRC attribute of the image is left blank at the beginning of the page loading (because there will be a big Red Cross in Internet Explorer, which affects the appearance of the page, it is better to set it to a small transparent image of 1px * 1px). We use the data-URL property to store the real URL of the image.

2. Listen for the scroll event of the container (in this case, the window) to get the window position and the image position. If the image appears in the window, set the image SRC to the value of the data-URL attribute.

3. That’s it, but since scroll events are quite frequent, we need to do some throttling.

code

Let’s say I have a bunch of images in my HTML that I can skip

<img src="./point.png" class="scrollLoading" data-url="https://ggg50.github.io/resume/img/article1.jpg" alt="">
<img src="./point.png" class="scrollLoading" data-url="https://ggg50.github.io/resume/img/article2.jpg" alt="">
<img src="./point.png" class="scrollLoading" data-url="https://ggg50.github.io/resume/img/article3.jpg" alt="">
<img src="./point.png" class="scrollLoading" data-url="https://ggg50.github.io/resume/img/ui.jpg" alt="">
<img src="./point.png" class="scrollLoading" data-url="https://ggg50.github.io/resume/img/cnode.jpg" alt="">
<img src="./point.png" class="scrollLoading" data-url="https://ggg50.github.io/resume/img/todo.jpg" alt="">
<img src="./point.png" class="scrollLoading" data-url="https://ggg50.github.io/resume/img/eevee.jpg" alt="">
<img src="./point.png" class="scrollLoading" data-url="https://ggg50.github.io/resume/img/bm.jpg" alt="">
<img src="./point.png" class="scrollLoading" data-url="https://ggg50.github.io/resume/img/mac.jpg" alt="">
Copy the code

Js code:

let canScroll = true // For throttling
let $imgDoms = $(".scrollLoading")

checkForImgShow()

// Bind the Scroll event to window
$(window).scroll(function(){
  if(! canScroll)return
  scrollSwitch()
  checkForImgShow()
})

// Check whether the image is loaded
function checkForImgShow(){
  $imgDoms.each(function(){
    let screenScroll = $(window).scrollTop()
    if (!this.preloaded) {
        if($(this).offset().top <= screenScroll +  $(window).height()  + 100) {$(this).attr("src", $(this).attr("data-url"))
          this.preloaded = true // The tag is loaded}}})}// throttling function
function scrollSwitch(){
  canScroll = false
  setTimeout((a)= >{canScroll = true}, 100)}Copy the code

Preload (jQuery)

The key to preloading is to “predict what the user is likely to do,” because random loading wastes resources.

For example, when the user moves the mouse on the “jump” button, there is a large probability that it will be clicked. We can trigger loading when mouseEnter, which will take about 0.5 seconds to reduce the probability of a blank screen. For example, in the search box, when the user has finished typing, the search can be triggered. When the user actually clicks the search button, we may have finished the search.

The following idea of preloading comes from Zhang Xinxu’s preloading of images and other resources based on user behavior

Prepare some CSS and HTML (can be skipped)

.tab a {
    display: inline-block;
    padding: 5px 0;
    margin: 0 15px;
    border-bottom: 3px solid transparent;
    color: # 343;
    font: menu;
    font-size: 14px;
}
.tab .active {
    border-bottom-color: #019EE4;
    color: #019EE4;
}
.panel {
    padding: 15px;
}
.panel img {
    display: none;
}
.panel .active {
    display: inline-block;
}
Copy the code

  <div id="tab" class="tab">
      <a href="javascript:" class="active">Figure 1</a>
      <a href="javascript:" class="">Figure 2</a>
      <a href="javascript:" class="">Figure 3</a>
  </div>
  <div id="panel" class="panel">
      <img class="scrollLoading active" src="https://ggg50.github.io/resume/img/eevee.jpg" alt="">
      <img class="scrollLoading" data-url="https://ggg50.github.io/resume/img/bm.jpg" alt="">
      <img class="scrollLoading" data-url="https://ggg50.github.io/resume/img/mac.jpg" alt="">
  </div>
Copy the code

The js code is as follows:

let $tabs = $("#tab a")
let $images = $("#panel img")

$tabs.each(function(index) {$(this).click(function() {
    statuSwitch($(this))
    statuSwitch($($images[index]))
  })
})

// Preload the code, in this case the core is the mouseEnter event
$tabs.each(function(index){
  if(!this.preloaded)
  $(this).mouseenter(function() {
    $images.eq(index).attr("src", $images.eq(index).attr("data-url"))

    // The tag is loaded
    this.preloaded = true})})function statuSwitch($dom){
  $dom.addClass("active").siblings().removeClass("active")}Copy the code

Lazy loading and preloading of images (ultra Simplified version code)