How to make website loads faster

Best Webdesign - website loads faster - website load

one of the Best Webdesign is making website loads faster



How to make website loads faster

As the Best Webdesign, we often face website loads slowly, because it has to wait for long time to download whole contents such as CSS, Javascript, and images. This content must be downloaded first before the browser shows the content.

Now, we will earn how to tell the browser to not download whole images on the website directly. The technique is called lazy load.
By using this technique, the images are not downloaded directly when we open the website. The image will be downloaded when we scroll to the point where the images exist.

Read: CSS Trunk Text

Read: Checking Password Strength with pStrength jQuery Plugin

Generally, we use the below HTML code to call the image:

<img src="images/blabla.jpg">

By using this code, browser will download the image when we open the website. The more images are, the longer we need to see the content of the website.

Using lazy load we modify the code with the one below:

<img data-src="images/blabla.jpg" class="lazy">

With this code, browser will not download the image directly when we open the website, so automatically browser just download CSS, Javascript, and HTML code.

How to show the image on scrolling?
We need to use Javascript code to do that.

Read: CSS Trunk Text

Javascript Code:

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages;    

  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".lazy");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    });

    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
  } else {  
    var lazyloadThrottleTimeout;
    lazyloadImages = document.querySelectorAll(".lazy");
    
    function lazyload () {
      if(lazyloadThrottleTimeout) {
        clearTimeout(lazyloadThrottleTimeout);
      }    

      lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
      }, 20);
    }

    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload);
  }
})

You can see the demo of one Best Webdesign:

DEMO

source: css-tricks.com



Related Article

Web Design Services - Best Webdesign - Best SEO Services

The usage of Bootstrap-DateTimePicker for Date Range

Hallo now, we as Web Design Surabaya wants to give the tutorial about the usage of bootstrap-datetimepicker for choosing check in and check out date. You do not only choose the date range but also the date and time range. To run the tutorial of date ...


Making an input type for checking valid email address in HTML

As a web design services, we often use input type="text" and input type="password" like below: For text: <input type="text" name="username" size="25" maxsize="15"> For password: <input type="password" name="password"> The syntax above ...


Restricted input type for number only by using HTML5

How to make the input type to be valid for number only? We do not need to use javascript, because we can do that easily with HTML5. Let say we want to make an input type for temperature with the following rule: minimum 30o and maximum 50o, but allow ...


Working Process

Web Design - Wedding Photography - Wedding Videography

Our Location at Surabaya and Bali

Website Design in Indonesia

Graphic Design in Indonesia

Contact

+628113638531 / +628113865464

info@tatamedia.com

Webdesigner in Indonesia

Videographer in Bali

Office

Tatamedia Solusindo Surabaya

Dekkophotography Bali

Fine Art Photography in Bali

Web Design

Support

Send your request to

info@tatamedia.com