Javascript to only display animated gif when loaded - javascript

I have an animated gif banner on my website that is around 2MB. For people with slow connections, I want to include some Javascript that will only display (and start playing) this gif when it is fully loaded, so that the rest of the website will already display whilst the gif is still loading. Ideally, I would have one image (loading.gif) be displayed first, and then switched to the banner (banner.gif) with javascript when banner.gif is loaded.
How do I do this? (I'm new to Javascript)
Thanks!

You can do this using an Image object, like so (do this when you want to start loading the banner, probably in onload):
var banner = new Image();
var loading = new Image();
var bannerElement = document.getElementById("banner"); // assumes an element with id "banner" contains the banner image - you can get the element however you want.
banner.src = "location/of/the/image.gif";
loading.src = "loading.gif";
banner.onload = function() {
bannerElement.removeChild(bannerElement.lastChild);
bannerElement.appendChild(banner);
};
bannerElement.removeChild(bannerElement.lastChild);
bannerElement.appendChild(loading);
Your banner element should look like this:
<div id="banner"><img src="location/of/the/image.gif" alt="Banner" /></div>
This is so that 1) The bannerElement.removeChild part will work and 2) To keep with the principles of progressive enhancement so people without JavaScript aren't left out.

How about a jquery script like http://jqueryfordesigners.com/image-loading/
So you would do
<style type="text/css" media="screen">
<!--
BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
H1 { margin-bottom: 2px; }
DIV#loader {
border: 1px solid #ccc;
width: 500px;
height: 500px;
overflow: hidden;
}
DIV#loader.loading {
background: url(/images/spinner.gif) no-repeat center center;
}
-->
</style>
$(function () {
var img = new Image();
$(img).load(function () {
//$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
$(this).hide();
$('#loader').removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr('src', 'myimage.jpg');
});
Note, you dont need to create a new image element if you already have one set. If you create one already then you can just use a selector. something like $('#myimage').load(... which is an image tag with an id called myimage.

I don't think you need JavaScript for this - you can set your image area's background image with css (use a very small image so that it appears quickly) and then within that area have your image tag with the 2mb image's src already set. That way it should appear when ready.
example css:
#banner {background: url('/img/banner-background.jpg');}

Related

Changing the innerHTML back to its original value but getting "undefined" using JavaScript

100% stuck on a homework assignment...
I have some simple JavaScript with the intent of changing the background image and text of a div upon mouseover over certain images. However, what I am trying to execute now is to revert the div back to its original state upon mouseout.
I am able to revert the divs background color with
document.getElementById('image').style.backgroundImage = "";
Essentially killing the background image and forcing it to revert to the background color that is there upon page load.
Now what I'm trying to do is store the original innerHTML text "Hover over an image below to display here." as a variable
var originalText = document.getElementById('image').innerHTML;
and then call it back when I need it.
function unDo() {
document.getElementById('image').style.backgroundImage = "";
document.getElementById('image').innerHTML = originalText;
however,
var originalText = document.getElementById('image').innerHTML;
is returning "undefined", which means I've goofed up somehow when storing the variable, right? I've tried innerText as well and that doesn't seem to do much for me. Below is the full HTML and JavaScript below.
/*Name this external file gallery.js*/
var originalText = document.getElementById('image').innerHTML;
function upDate(previewPic) {
document.getElementById('image').innerHTML = previewPic.alt;
document.getElementById('image').style.backgroundImage = "url('" + previewPic.src + "')";
/* In this function you should
1) change the url for the background image of the div with the id = "image"
to the source file of the preview image
2) Change the text of the div with the id = "image"
to the alt text of the preview image
*/
}
function unDo() {
document.getElementById('image').style.backgroundImage = "";
document.getElementById('image').innerHTML = originalText;
/* In this function you should
1) Update the url for the background image of the div with the id = "image"
back to the orginal-image. You can use the css code to see what that original URL was
2) Change the text of the div with the id = "image"
back to the original text. You can use the html code to see what that original text was
*/
}
body {
margin: 2%;
border: 1px solid black;
background-color: #b3b3b3;
}
#image {
line-height: 650px;
width: 575px;
height: 650px;
border: 5px solid black;
margin: 0 auto;
background-color: #8e68ff;
background-image: url('');
background-repeat: no-repeat;
color: #FFFFFF;
text-align: center;
background-size: 100%;
margin-bottom: 25px;
font-size: 150%;
}
.preview {
width: 10%;
margin-left: 17%;
border: 10px solid black;
}
img {
width: 95%;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<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>
note: I'm not allowed to change the HTML for this assignment. Only the JavaScript. You do NOT have to do my homework for me. However, a hint in the right direction would be nice.
screenshotoflocalenvironment
Seems like this could be happening because your script tag in your html is above the body.
When you declare the "original text" variable at the beginning of your script, the page hasn't loaded yet, and so it comes back undefined, because it can't find anything in the document with an "image" class.
Sometimes it loads quick enough maybe, other times it doesn't
Instead, move your script tag in your html to right below the body tag. So the script loads after the body has loaded. Should fix it.
**additional tip.
Store your element (i.e: the "image") in a variable instead of calling getElementbyId multiple times. Every time you do this javaScript searches the entire DOM which is resource intensive in bigger applications and can get pretty slow. Just a pet peeve of mine.
First save the background color in a variable :
z = document.getElementById("mydiv").style.backgroundColor;
Then on mouse out, restore this color :
document.getElementById("mydiv").style.backgroundColor = z;
It works for me. My full code is :
` <script>
var z;
$( document ).ready(function() {
document.getElementById("mydiv").onmouseover = function() {mouseOver()};
document.getElementById("mydiv").onmouseout = function() {mouseOut()};
});
function mouseOver() {
z = document.getElementById("mydiv").style.backgroundColor;
document.getElementById("mydiv").style.backgroundImage = "url('londoneye.jpg')";
}
function mouseOut() {
document.getElementById("mydiv").style.backgroundImage = "";
document.getElementById("mydiv").style.backgroundColor = z;
}
</script>`
The html is :
<div id="mydiv" style="width:400px; height:400px; background-color:yellow;margin-left:50px; margin-top:50px;">

Play animation when content get into view

I've been searching on many posts but almost all of them are confusing.
I'm working with animate.css into a which is at the middle of my page.
For default the animation is played when the page is loaded, but i want that it play when i reach the (when i'm scrolling).
Please, don't say about JS Reveal, i'd like to use the animation from animate.css
What i was trying:
HTML
<!-- Others div above -->
<div class="row sf-medida" id="sf-medida" onscroll="Animar();">
<!-- Others div below -->
JS
function Animar() {
setTimeout(function(){
document.getElementById("sf-medida").style.visibility = "visible";
$("#titulo-general").addClass("animated fadeInLeft");
$(".sub-titulo").addClass("animated bounceInRight");
$(".titulo-izquierda").addClass("animated swing");
$(".texto-1").addClass("animated fadeIn");
$(".texto-2").addClass("animated fadeIn");
},1000)
}
But it doesn't work, however, i've tried adding
window.addEventListener("scroll", Animar);
But what it does is that the animation is played whenever i scroll on the page,
This can be very easily done using little jquery. All you need to do is listen to the scroll event, then check if user have scrolled to the target element. If the user did, then add animation class from your animate.css. Adjust your if condition according to your desires. Check the below code and fiddle https://jsfiddle.net/15z6x5ko/ for reference
$(document).ready(function(){
$(document).scroll(function(evt){
var v2 = Math.abs($('.box').position().top - $(window).height()/2);
var v1 = $(this).scrollTop();
if( v1 > v2 ){
console.log('in');
$('.box').addClass('animated flip')
}
});
});
So as per your request, let me try to explain the code line by line
$(document).ready(function(){
This is easy to understand. It just waits for browser to load all HTML & CSS first and when everything is loaded, the javascript code inside this function will run.
$(document).scroll(function(evt){
This is an event handler, our callback function will run whenever user scrolls on document. Remember change $(document) according whatever the parent is of your target element. So if your target div is inside another div whose class is .parent then use $('.parent').scroll . As for my code I am listening the event on document. When my document scrolls, my event will trigger.
var v1 = $(this).scrollTop();
This code will get the amount of scrolling user had done in pixels.
var v2 = Math.abs($('.box').position().top - $(window).height()/2);
This is a simple math that checks the position of my target div from its parent element subtracting the half of the size of window from it. This will return the pixel positing of your target div. So when user reaches this pixel positing while scrolling, your animation will start.
$('.box').addClass('animated flip')
Now this code simply adds the animation css classes into the target div as soon as user scrolls to the target div.
I'm using "WoW.js" for my scroll reveal library. It's pretty easy to use, like for real. One line of code
<div class="wow fadeIn">content</div>
Here, take a look: http://mynameismatthieu.com/WOW/docs.html
Here's an example using Jquery.
In it we use .scrollTop and .height to measure the videos container from the top of the page so that we know when it comes into view when scrolling. (it's actually set to load when it reaches 100px below the bottom of the viewable area, a sort of preload. you can adjust it to whatever you like.)
The video load is done by copying the url from data-src= into src= when the video container is at the desired spot on the page. (in this case, 100px below the viewable area)
fiddle
note, the video won't load on stack so be sure to view the fiddle
https://jsfiddle.net/Hastig/xszu6b1p/
I scraped it together from these two answers..
Youtube Autoplay
Ladyload Images
$(window).scroll(function() {
$.each($('iframe'), function() {
if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
var source = $(this).data('src');
$(this).attr('src', source);
$(this).removeAttr('data-src');
}
})
})
body {
margin: 0;
}
.filler {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
}
.filler-top { background-color: blue }
.filler-btm { background-color: green; }
.video-container {
/* css tricks - responsive iframe video */
/* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
display: flex;
justify-content: center;
background-color: red;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filler filler-top">filler top</div>
<div class="video-container">
<iframe data-src="https://www.youtube.com/embed/f0JDs4FY8cQ?rel=0&autoplay=1"></iframe>
</div>
<div class="filler filler-btm">filler bottom</div>

JQuery, not animating my background image when trying to refresh

I'm talking about this site here: malcolmtanti.com
I am using this function:
<script>
var image = new Image();
image.onload = function () {
$('header').animate({opacity: 1}, 2000);
}
image.src = "./images/background.jpg";
</script>
to animate the fade in of my main background image and the title etc. It should fade in the header element in my css.
This is the CSS:
header{
position: relative;
background: url(../images/background.jpg) no-repeat top center;
background-size: cover !important;
-webkit-background-size: cover !important;
/*height: 700*/
top:50px;
min-height:95%;
max-width: 100%;
overflow: hidden;
opacity:0;
}
For some reason, the first time I access the site, the picture loads for me, but once I press refresh, the opacity of the header tag is remaining 0. How can this be?
It might be a problem with the browser caching the image so that when you refresh the page it doesn't fire the animation since the image is already preloaded.
Try loading the image with a unique id (like the current time) to prevent this.
<script>
var image = $('<img/>');
var srcText = './images/background.jpg?t=' + new Date().getTime();
image.attr('src', srcText).load(function() {
$(this).remove();
$('header').animate({opacity: 1}, 2000);
});
</script>
U have used the link from (link tag, script tag )the href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" and src of the script like this. Don't use like this. copy the code of above link and place it in your folder and refer that local link..

Gallery. Display divs corresponding to clicked <li> item. Javascript

I'm trying to build a basic gallery which displays a large image [div] depending on which image is clicked. The thumbnail images are stored in a basic unordered list.
I'm a javascript noob, I could use getElementById to change display class etc but I'd prefer not to have a separate function for each image, of which they're may be 100 or so.
Is there a way to call the same function to display a different div depending on which image is clicked [a larger version of that image]?
So:
If img1 is clicked display divA,
If img2 is clicked display divB,
If img3 is clicked display divC...
Many thanks.
The event passed to the onclick method has a target parameter, which refers to the element that was clicked.
Please post your code, preferably in a working JsFiddle, to get a more targeted answer.
Here is a general example of what you want to achieve:
document.onclick = function(e) {
// e.target is the img that was clicked, display the corresponding div
// Get the image number from the id
var number = e.target.id.substr(3)
// Display the corresponding div
document.getElementById('div' + number).style.visibility = 'visible';
}
Please note that the last line will most likely be different in your implementation - I don't know how you are displaying these divs.
You could try as follows
Assign id to all images in such a manner when they will be clicked we
could generate the corresponding div's id with some logical
manipulation.
Such as
images would have id like img_divA,img_divB and when they will be clicked , get there id and do some stuff like substring and you will get divA , divB and so on .. Finally show that by javascript ..
You could do something like this. Here actually a function is created per clickable dom element, but they are programmatically created. I use the num attribute to make the correspondence between the images to show and the images to click but there is many other (good) ways to do it.
// retrieve the divs to be clicked
var toClicks = document.querySelectorAll(".img-to-click");
[].forEach.call(toClicks, function(node){
// retrieve the target image
var num = node.getAttribute("num");
var target = document.querySelector(".img-to-show[num=\"" + num + "\"]");
// create the click listener on this particular dom element
// (one of the image to click)
node.addEventListener('click', function(){
// hide any currently displayed image
var current = document.querySelector(".img-to-show.shown");
if(current) current.classList.remove("shown");
// set the new current
target.classList.add("shown");
});
});
#to-display {
position: relative;
width: 100%;
height: 50px;
}
#to-click {
position: relative;
margin-top: 20px;
}
.img-to-show {
position: absolute;
width: 100%;
height: 100%;
display: none;
}
.img-to-show.shown {
display: block;
}
.img-to-click{
display: inline-block;
background-color: gray;
width: 50px;
color:white;
text-align: center;
line-height: 50px;
vertical-align: middle;
height: 50px;
cursor:pointer;
}
<div id="to-display">
<div class="img-to-show" num="1" style="background-color:blue;"></div>
<div class="img-to-show" num="2" style="background-color:red;"></div>
</div>
<div id="to-click">
<div class="img-to-click" num="1">1</div>
<div class="img-to-click" num="2">2</div>
</div>

Replay a GIF Animation/Reload GIF on Click

I have a GIF animation that is large and I am having it display a loading icon until the GIF is loaded. Once it is loaded the GIF shows. Works great but I want to add a "replay" button to trigger the GIF to replay (reload).
Code for the loading and GIF:
HTML
<div id="loader" class="loading img-center"></div>
CSS
#loader {
width: 600px;
height: 450px;
margin: auto;
}
#loader.loading {
background: url(/Images/ajax-loader.gif) no-repeat center center;
width:32px;
margin:auto ;
}
JS
var $j = jQuery.noConflict();
$j(function () {
var img = new Image();
$j(img)
.load(function () {
$j(this).hide();
$j('#loader')
.removeClass('loading')
.append(this);
$j(this).fadeIn();
})
.error(function () {
})
.attr('src', '/2012/images/august/sailboat.gif');
});
The above code works fine. Now for the "Replay" or "Reload" Code that Does not Work:
HTML
<a id="refresh" href="#"> Replay Animation </a>
JS
$j(function() {
$j("#refresh").click(function() {
$j("#loader").load("/2012/images/august/sailboat.gif")
})
})
I know there is some error with the JS but with my lack of skill in JS I do not know what I should be doing or trying. Any help or advice is greatly appreciated!
Thanks!
Check this:
$j("#refresh").click(function() {
$j("#loader").find('img').attr("src", "/2012/images/august/sailboat.gif");
});
As in your previous code you're append the image within #loader so, $('#loader').load(..) will not work. Find the image within #loader and then change the src of that image.
You could also append timestamp to avoid image loading from cache if needed:
$j("#refresh").click(function() {
var timestamp = new Date().getTime();
$j('#loader').find('img').attr('src', '/2012/images/august/sailboat.gif'+'?'+timestamp);
});

Categories