Lazy Loading Images for Site Optimization

Lazy Loading is a practice to reduce page load time by only loading critical or on-screen images when they are either needed or the page has directly scrolled over them. The website only needs to load the temporary image for all images until they are requested. Below is an example of Lazy Loading on SCAD District .
Lazy Loading can be easily achieved via plugins on WordPress. The one used for SCAD District is called BJ Lazy Loading and can be easily configured with custom thumbnails for the temporary images.

Comments

Post a Comment

Popular posts from this blog

Creating a Blockquote

Image
Creating a blockquote can make a more impactful article by drawing visual attention to important information in a stylistic and professional way. Example of a blockquote CSS blockquote{     display:block;     background: #fff;     padding: 15px 20px 15px 45px;     margin: 0 0 20px;     position: relative;     font-size: 14px;     line-height: 1.2;     color: #666;     border-left-style: solid;     border-left-width: 15px;     border-right-style: solid;     border-right-width: 2px; } blockquote::before{     content: "\201C";     font-family: Georgia, serif;     font-size: 60px;     font-weight: bold;     color: #FF9540;     position: absolute;     left: 10px;     top:5px; } blockquote::after{     content: "\201D";     font-family: Geo...
Read more

Simple JavaScript Countdown Timer

Image
This tutorial will go over a simple dynamic countdown timer using JavaScript. Example of a countdown timer using the code below HTML + JavaScript <p id="showDate"></p>     <script>         var countDownDate = new Date("Jun 18, 2019 17:37:00").getTime();         var x = setInterval(function () {         var now = new Date().getTime();         var distance = countDownDate - now;         var days = Math.floor(distance / (1000 * 60 * 60 * 24));         var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));         var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));         var seconds = Math.floor((distance % (1000 * 60)) / 1000);         document.getElementById("showDate").innerHTML = days + "d " + hours + "h "   ...
Read more

SCAD Stylesheet Reference & Blog Intro

The stylesheet reference for articles and posts is up for viewing. All the CSS code has been added to all sites, so you just need to use the code mentioned in this sheet to make it work. More stylistic elements will be added in the future (this is a live document). I'll be around to answer any questions you may have, so feel free to shoot me an email (valiqu20@student.scad.edu). This blog will contain basic web development information for editors, photographers, and anyone else contributing to the SCAD sites who want to know more and optimize content. SCAD Stylesheet Reference (Live) https://drive.google.com/drive/folders/1czGPzn-ZnkB1KCLekq6paHooZ9rZGHBd?usp=sharing
Read more