JavaScript Image Loader

Developer
Pedro Tavares
Size
3,171 Kb
Views
8,096
  1. JavaScript Image Loader Previews
  2. JavaScript Image Loader HTML Codes
  3. JavaScript Image Loader CSS Codes
  4. JavaScript Image Loader JS Codes

How do I make an javascript image loader?

What is a javascript image loader? How do you make a javascript image loader? This script and codes were developed by Pedro Tavares on 01 December 2022, Thursday.

JavaScript Image Loader Previews
IQ Test

JavaScript Image Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JavaScript Image Loader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/rwxpbb.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>For usage code, see:<a href="https://codepen.io/dipscom/pen/yOpjBW" target="_blank"> This pen</a></p> <script src="js/index.js"></script>
</body>
</html>

JavaScript Image Loader - Script Codes CSS Codes

/* **************************************** */
/* Default CSS styles being imported from:
/* https://codepen.io/dipscom/pen/RWXPBB
/* **************************************** */
p { margin: 10px;
}

JavaScript Image Loader - Script Codes JS Codes

var ImageLoader = function(path, dbug) { "use strict"; if(dbug) console.log("[IMAGE_LOADER] Init"); // Total count of images to load var count = 0; this.load = function(parent, names, extension, className, id) { // Grab the html tag based on the string provided using its id or tag name var container = document.getElementById(parent) || document.querySelector(parent); // For each image name in the names array names.forEach( function(name) { // Append the image created into the html container tag given container.appendChild(createImage(name, extension, path, className, id)) }) }; function createImage(name, extension, path, className, id) { if(dbug) console.log("[IMAGE_LOADER] Image " + name); // Add one to the count of images loading count++; // Create the element tag var image = document.createElement("img"); // If a path was provided, use it image.src = (path ? path + name + extension : name + extension) // If an id name was provided, use it - Otherwise, use the original filename image.id = (id ? id : name); // If a class name was provided, use it if(className) image.className = className; image.onload = countReady; return image; } function countReady() { // Once loaded // Subtract one from the count of images loading count--; // When the count reaches zero if( count === 0 ) { // All images have loaded // Create the event to dispatch the news var event = document.createEvent('Event'); event.initEvent("IMAGES_LOADED", true, false); window.dispatchEvent(event); } }
};
JavaScript Image Loader - Script Codes
JavaScript Image Loader - Script Codes
Home Page Home
Developer Pedro Tavares
Username dipscom
Uploaded December 01, 2022
Rating 3
Size 3,171 Kb
Views 8,096
Do you need developer help for JavaScript Image Loader?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pedro Tavares (dipscom) Script Codes
Name
Shooting Hoops
Mask Within Mask
GSAP - Animate SVG path with AttrPlugin
Responsive Animated Moving Things
SVG Grid Mask
Catch Me If You Can
MOMO BROS
GSAP - Responsive Corner Navigation
Buttons.js - Example
SVG Grid Mask - With Color effect
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!