How to perform Lazy Loading in JSP-Servlet?

Question

I have some homework to equip Lazy Loading into my java project using JSP-Servlet. I have not learned front-end development so I'm having difficulties accomplishing this task. When I run the web, it load all images but after i scroll it, the image is broken. I can not use any library in this project, is there any solution to fixed this?

This is my front-end code:

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages = document.querySelectorAll("img.lazy");    
  var lazyloadThrottleTimeout;
  
  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);
});

img {
  background: #F1F1FA;
  width: 400px;
  height: 300px;
  display: block;
  margin: 10px auto;
  border: 0;
}

<%-- 
    Document   : shopping
    Created on : Aug 26, 2018, 11:10:09 AM
    Author     : HiruK
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="tbl_machine.Tbl_machineDAO" %>
<%@page import="tbl_machine.Tbl_machineDTO" %>
<%@page import="java.util.List" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link rel="stylesheet" type="text/css" href="css/table.css">
        <link rel="stylesheet" type="text/css" href="css/center.css">
        <script src="js/lazyLoading.js"></script>
    </head>
    <body>
        <h1>Shopping here!</h1>
        <c:set var="list" value="${sessionScope.IMAGELIST}"/>
        <c:if test="${not empty list}">
            <c:forEach var="item" items="${list}">
                <img class="lazy"src="<c:url value="${item.picture}"/>"/>
            </c:forEach>
        </c:if>
        <a href="member.jsp">Click here to back main page</a>
    </body>
    
</html>

Vüsal · Accepted Answer · 2019-02-22T12:52:19.823

Your images are broken because of the next line:

img.src = img.dataset.src;

Your img doesn't have dataset attribute - hence the src is set to undefinded.

First of all, you have to understand, that what you write in JSP is compiled into an HTML code at the end and given to the browser.
So, the next code fragment will be translated to a series of <img /> tags and given to your browser - and your browser will download all of them:

<c:forEach var="item" items="${list}">
    <img class="lazy"src="<c:url value="${item.picture}"/>"/>
</c:forEach>

So it's not lazy loading.

You can create an HTTP endpoint which will return a list of images to be loaded on the scroll or resize events - and then load them dynamically in your JS.

Something like this:

function loadImages(images) {
    var src = document.getElementById("image-container");
    images.foreach(function(imageUrl) {
        var img = document.createElement("img");
        img.src = "image.png";
        src.appendChild(img);
    });
}

Read this for more info about AJAX: How to make an AJAX call without jQuery?

Ty so much, i try to use data-src element in tag, it work like charm, but im wonder if that still count as a "Lazy Loading"? — nguyen sam, Feb 22 '19 at 13:35
@nguyensam, when your browser gets an HTML with `img` tags inside - it will start loading them ASAP. As per as I know - "lazy loading" - is the way to load an image if required, for example if user needs to scroll the page see an image - then there is no need to load this image preemptively. You can load it on demand. But in your case - they are already loaded - it's not lazy loading I think. — Vüsal, Feb 22 '19 at 13:41

How to perform Lazy Loading in JSP-Servlet?

1 Answers1