JavaScript Image Loader
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 - 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](http://shots.codepen.io/dipscom/pen/bdyEZY-512.jpg)
Developer | Pedro Tavares |
Username | dipscom |
Uploaded | December 01, 2022 |
Rating | 3 |
Size | 3,171 Kb |
Views | 8,096 |
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!
Name | Size |
GSAP - Fun with Cycle and Bezier 2 | 4,195 Kb |
SVGText - Pattern Fill | 20,155 Kb |
Catch Me If You Can | 4,094 Kb |
GSAP - Fun with Cycle and Bezier | 3,862 Kb |
SVG Grid Mask | 3,267 Kb |
SVG Grid Mask - With Color effect | 3,666 Kb |
Ghosty McGoat | 3,849 Kb |
Buttons.js - Example | 3,730 Kb |
Shooting Hoops | 6,731 Kb |
Animated SVG Blur | 2,288 Kb |
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!
Name | Username | Size |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
Slider for stackoverflow | KKOKU | 3,222 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
Minimelephant | Smashlee | 2,507 Kb |
3D flipping card | Ssaakkaa | 2,238 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Em Test | Rodesco | 1,784 Kb |
A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!