How to preload images in JavaScript - javascript

I need some help preloading images in javascript, here is my code right now. I have to preload the images and then attach a mouseover and mouseout event to them, but preloading is really the only problem I am having right now.
"use strict";
var $ = function(id) { return document.getElementById(id); };
window.onload = function preload() {
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i,link, image;
// attach mouseover and mouseout events for each image
image1.onmouseover = function() {
"images/release.jpg";
};
image1.onmouseout = function() {
};
image2.onmouseover = function() {
};
image2.onmouseout = function() {
};
};
Blockquote
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>Image Rollover</title>
<link rel="stylesheet" type="text/css" href="rollover.css">
<script type="text/javascript" src="rollover.js"></script>
</head>
<body>
<main>
<h1>Fishing Images</h1>
<p>Move your mouse over an image to change it and back out of the
image to restore the original image.</p>
<ul id="image_list">
<li><a href="images/release.jpg" id="catch" title="Catch and
Release"></a></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>
<img id="image1" src="images/hero.jpg" alt="">
<img id="image2" src="images/bison.jpg" alt="">
</p>
</main>
</body>
</html>
`

You can do that binding the event onload
image2.onload = function(){
image2.onmouseover = function() {
};
image2.onmouseout = function() {
};
}
If you want to wait for all images to load you can do it with jQuery
$(window).on("load", function() {
//This will be executed when every single DOM element is loaded
}

Related

JavaScript: Next Button

I need some with javascript code. I have a html code that read my list of image from in my image folder. I have to create a function button, so when I click on the next button, the next image will show. I have my code, but somehow it's not working. I have debug the code, there is no error, however the next image is not showing
Here is my code code:
var $ = function(id) {
return document.getElementById(id);
};
var listNode, captionNode, imageNode;
// Process image links
var i, linkNode, image;
var imageCache = [];
var imageCounter = 0;
var nexButton = function () {
listNode = $("image_list");
captionNode = $("caption");
imageNode = $("image");
var links = listNode.getElementsByTagName("a");
var imageCounter = 0;
for (i = 0; i < links.length; i++) {
linkNode = links[i];
// Preload image and copy title properties
image = new Image();
image.src = linkNode.getAttribute("href");
image.title = linkNode.getAttribute("title");
if (imageCounter < linkNode) {
imageCounter = imageCounter + 1;
image = imageCache[imageCounter];
imageNode.src = image.src;
captionNode.firstChild.nodeValue = image.title;
}
else {
alert("This is the last image");
}
}
};
window.onload = function() {
$("next").onclick = nexButton;
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="slide_show.js"></script>
</head>
<body>
<section>
<h1>Fishing Slide Show</h1>
<ul id="image_list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h2 id="caption">Casting on the Upper Kings</h2>
<p>
<img src="images/casting1.jpg" alt="" id="image">
</p>
<input type="button" value="Previous" name="previous" id="previous">
<input type="button" value="Next" name="next" id="next">
</section>
</body>
</html>

Trouble executing an event

Updated External JS Sheet Code Below
I am attempting to execute a simple photogallery. The task for my class is to hover over a small image and have the alt text and image displayed in the larger box and when the mouse leaves the text the background image should display as they were originally
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<link rel="stylesheet" href="css/gallery.css">
<script src = "js/gallery.js"></script>
</head>
<body>
<div id = "image">
Hover over an image below to display here.
</div>
<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)" onmouseout = "unDo()">
<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover = "upDate(this)" onmouseout = "unDo()">
<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" onmouseover = "upDate(this)" onmouseout = "unDo()">
</body>
</html>
and here is my (broken) external Javascript sheet:
function upDate(PreviewPic){
var imageLarge= document.getElementById('image');
document.getElementById('image').innerHTML = PreviewPic.alt;
document.getElementById('image').backgroundImage =imageLarge.src;
}
function unDo(){
document.getElementById('image').innerHTML = "Hover over an image below to display here.";
}
this one works vanilla js and i commented a lot of the stuff, you said you're doing it for a class if its a coding class hopefully this helps you learn.the code snipit works but is not styled in a good way so try it out in your editor with you're css.
//grabing the ellements by id
var imgOne = document.getElementById("img1");
var imgTwo = document.getElementById("img2");
var imgThree = document.getElementById("img3");
var displayText = document.getElementById("displayText");
var displayImg = document.getElementById("displayImg");
//add eventlisteners to events
//this can be done in the html; but i prefer it in the javaScript
// event listeners for first img
imgOne.addEventListener("mouseover", function () {
displayImg.src = imgOne.src;
displayText.innerHTML = imgOne.alt;
});
// to replace
imgOne.addEventListener("mouseout", function () {
displayImg.src = "";
displayText.innerHTML = "Hover over an image below to display here.";
});
// event listeners for second img
// adds the stuff
imgTwo.addEventListener("mouseover", function () {
displayImg.src = imgTwo.src;
displayText.innerHTML = imgTwo.alt;
});
// reverts stuff
imgTwo.addEventListener("mouseout", function () {
displayImg.src = "";
displayText.innerHTML = "Hover over an image below to display here.";
});
// event listener for third img
imgThree.addEventListener("mouseover", function () {
displayImg.src = imgThree.src;
displayText.innerHTML = imgThree.alt;
});
imgThree.addEventListener("mouseout", function () {
displayImg.src = "";
displayText.innerHTML = "Hover over an image below to display here.";
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<link rel="stylesheet" href="css/gallery.css">
</head>
<body>
<div id = "image">
<!-- you could create a text node and append it rather than adding a p tag
but hard codeing it is a little easier -->
<img src="" alt="" id="displayImg">
<p id="displayText">Hover over an image below to display here.</p>
</div>
<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" id="img1">
<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" id="img2">
<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" id="img3">
<!-- i moved the script to the bottom so that you're html will load before the js
this can prevent some "can not get/append/set ****** to undefined" errors.
(i've heard either way is fine but this just the way i learned)-->
<script src="main.js"></script>
</body>
</html>
The updated javascript, I hope this works because I have not tested it:
function upDate(PreviewPic){
var imageLarge = document.getElementById("image");
imageLarge.innerHTML += '<img src="'+PreviewPic.src+'">';
imageLarge.innerHTML += PreviewPic.alt;
}
function unDo(){
document.getElementById('image').innerHTML = "Hover over an image below to display here.";
}
the upDate function will use the (this) value of the onmouseover="", the this element will be the PreviewPic, this variable will be used to insert the src and alt into the #image element. I have not edited the unDo function, this will reset the innerHTML of the #image element.
I used angular, witch is over kill; but it works and you could easily add more images. :)
var app = angular.module("MainApp", []);
app.controller("mainController", ["$scope", function($scope) {
$scope.display = {};
$scope.album = [{
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg",
name: "Styling with a Bandana"
}, {
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG",
name: "With My Boy"
}, {
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg",
name: "Young Puppy"
}];
$scope.newDisplay = function(item) {
$scope.display = item;
}
}]);
div.gallery {
box-sizing: border-box;
width: 33%;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en" ng-app="MainApp">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<link rel="stylesheet" href="main.css">
<!-- <link rel="stylesheet" href="css/gallery.css">-->
</head>
<body ng-controller="mainController">
<div class="display" ng-model="display">
<img ng-src="{{ display.img }}" alt="">
<h1>{{ display.name }}</h1></div>
<div class="gallery" ng-repeat="item in album" ng-mouseover="newDisplay(item)">
<img ng-src="{{ item.img }}" alt="">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

changing DOM element after document loading

Have simple code:
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener( 'DOMContentLoaded', function(){
document.getElementById( 'dog' ).src = 'https://www.petfinder.com/wp-content/uploads/2012/11/122163343-conditioning-dog-loud-noises-632x475.jpg';
document.getElementById( 'dog' ).alt = 'Doggy';
});
</script>
</head>
<body>
<div id="container">
<img id="dog" src="" alt="">
</div>
</body>
</html>
How can I catch IMG element downloading? Tried to use mutations but unsuccessfully
The download starts at .src =.
You can subscribe on the load event to check when it is done.
img.onload = () => console.log('Done!');
You can also check the boolean complete
if (img.complete) { }

jquery preloaded imgages with rollovers

So I am doing something very basic that can be done with CSS but I want to do it with jQuery to get familiar with the library.
I am trying to create a rollover image gallery. Where when you put the mouse over the image it will be swapped with a slightly edited version of it.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery</title>
<script src="jquery-1.9.1.js"></script>
<style>
</style>
</head>
<body>
<div id="gallery">
<img src="images/one_s.jpg" />
<img src="images/two_s.jpg" />
<img src="images/three_s.jpg" />
<img src="images/four_s.jpg" />
<img src="images/five_s.jpg" />
<img src="images/six_s.jpg" />
</div>
<script>
$(document).ready(function(){
var alternate = ['images/one_s_edited.jpg',
'images/two_s_edited.jpg',
'images/three_s_edited.jpg',
'images/four_s_edited.jpg',
'images/five_s_edited.jpg',
'images/six_s_edited.jpg'];
var $selection = $("#gallery img");
for(var i = 0; i < alternate.length; i++)
{
var imgObject = new Image();
var downloadedImg = imgObject.src = alternate[i];
console.log(downloadedImg);
var originalSrc = $selection.eq(i).attr("src");
console.log(originalSrc + "\n");
$selection.eq(i).hover(
function(){
$(this).attr("src", downloadedImg);
},
function(){
$(this).attr("src", originalSrc);
}
);//End hover
}//End loop
});//End ready
</script>
</body>
</html>
Here is a link to the final result: link
As you can see it rolls over but not as planned. It ends up with the last rollover-image and doesn't change back to the original nor does it show the appropriate rollover image that corresponds with it.
Any simple suggestions without using regular expressions?
The problem is the wrong usage of a closure variable in a loop.
But the solution can be simplified to
$(document).ready(function () {
var $selection = $("#gallery img");
$selection.hover(function () {
this.src = this.src.replace('.jpg', '_edited.jpg')
}, function () {
this.src = this.src.replace('_edited.jpg', '.jpg')
})
}); //End ready

HTML5 Canvas Slideshow Using Javascript

I'm not sure exactly where my issue lies, I'm relatively new to both canvas and JavaScript so I'm sorry if this is very vague but I cannot get my slideshow canvas to function, let alone display an image.
<!DOCTYPE html>
<html>
<head>
<title>PhotoGenesis</title>
<LINK REL=StyleSheet HREF="homecss.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript" src="homescript.js"></script>
</head>
<body onLoad="javascript:preloader()">
<header>
<a href=http://localhost.com/home><img id=logo alt="PhotoGenesis" src="logo.png""/> </a>
<nav id=headernav>
<a href=http://localhost.com/home>home</a>
<a href=http://localhost.com/news>news</a>
<a href=http://localhost.com/photography>photography</a>
<a href=http://localhost.com/video>video</a>
<script type="text/javascript">
var lightbox="lightbox ("+"0"+")";
document.write("<a href=http://localhost.come/lighbox>" + lightbox + "</a>");
</script>
<a href=http://localhost.com/about>about</a>
<a href=http://localhost.com/contact>contact</a>
<a href=http://localhost.com/blog>blog</a>
</nav>
<span id=search></span>
<img id=miscone alt="Full Screen" src="miscone.png"/>
<img id=misctwo alt="Share" src="misctwo.png"/>
</header>
<main onLoad="javascript:canvasslider()">
<canvas id="defaultbackground" width=100%; height=100%;/>
</main>
<footer>
<nav id="footernav">
<a href=http://www.facebook.com><img id="fbnav" alt="Facebook" src="fbooknav.png"/></a>
<a href=http://www.twitter.com><img id="tnav" alt="Twitter" src="twitternav.png"/></a>
<a href=http://www.stumbleupon.com><img id="snav" alt="StumbleUpon" src="stumblenav.png"/></a>
</nav>
</footer>
</body>
</html>
<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="background1.png"
images[1]="background2.png"
images[2]="background3.png"
// start preloading
for(i=0; i<=images.length; i++)
{
var backstring ="background"+i+".png";
images[i].id=backstring;
imageObj.src=images[i];
}
}
function canvasslide()
{
function init()
{
defaultbackground = document.getElementById("defaultbackground");
ctx = defaultbackground.getContext("2d");
for(i=0; i<=images.length; i++){
var backstring ="background"+i+".png";
sprite = document.getElementById(backstring);
ctx.drawImage(sprite,0,0);}
}
}
</script>
sprite.onload = function() {
ctx.drawImage(sprite,0,0);
}
I'm pretty sure your image isn't loaded yet when you draw it on canvas. Try something like this, I'm not sure this is the right code because I didn't get every part of your code, but you have to use image.onload function before you draw it onto a canvas.

Categories

Resources