Hide loading animation after image loaded - javascript

I have a jQuery script that hides the loading animation after the original image has loaded. Here is the HTML code:
<img id="loading_img" src="loading.gif">
<img id="q" style="display: none;" src="abc.png"/>
And here is the javascript:
$('#q').load(function(){
$('#loading_img').hide();
$('#q').show();
});
But the problem is, the loading image doesn't hide on 100% time. Sometime it stays, and the original image doesn't appear. I tried changing the positions (original image then loading image) but nothing happened. What should I do to make the code working on every time?

The load event won't fire on an image that is hidden in most browsers:
<img id="loading_img" src="loading.gif">
<img id="q" style="display: none;" src="abc.png"/>
You'll have to create a new image in javascript, and listen for the load event on that image :
var img = new Image();
img.onload = function() {
document.getElementById('loading_img').style.display = 'none';
document.getElementById('q').style.display = 'inline';
}
img.src = document.getElementById('q').src;
if (img.complete) img.onload();
or more jQuery'ish
$(new Image()).on('load', function() {
$('#loading_img').hide();
$('#q').show();
}).prop('src', $('#q').prop('src'))
.each(function() { if (this.complete) $(this).trigger('load');})

Related

HTML - Img alt attribute hides image

I'm grabbing favicon's from sites programmatically by generically making a request for the icon to "example.com/favicon.ico".
If the site doesn't have a favicon, I want to use the "alt" attribute of the image to hide the image so that it doesn't appear and doesn't have a "missing image" icon.
For example
<img src="https://www.businessinsider.com/favicon.ico" alt="$(this).hide();" height="16" width="16">
Can this be done?
You can use the built-in error() method. Hide your image based upon that.
$("img").on("error", function() {
$(this).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://www.businessinsider.com/favicon.ico" height="16" width="16">
If you want an alternative image when the image is not available, give the new image source.
$("img").on("error", function() {
$(this).attr("src", "https://homepages.cae.wisc.edu/~ece533/images/mountain.png");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://www.businessinsider.com/favicon.ico" height="16" width="16">
You can put your placeholder immediately and check if the image loads on script. If it loads, replace the img src
var thisImage = new Image();
thisImage.src = 'https://www.businessinsider.com/favicon.ico';
thisImage.onload = function() {
console.log("Image 1 ready to append");
document.querySelector('.bg-image').src = thisImage.src;
};
<!--The source here is your placeholder-->
<img class="bg-image" src="https://placekitten.com/50/50" height="50" width="50" />

How can I add a link to an image that changes on hover via jQuery?

I have an image below a nav and the image changes depending on which nav item is hovered over. Here is the code:
$(document).ready(function() {
$('.nav-item').mouseenter(function() {
var img = $(this).attr('data-headerimg');
$('img#header-img').attr('src', img);
}).mouseleave(function() {
var img = $(this).attr('data-headerimg');
$('img#header-img').attr('src', img);
});
});
I'd like the image to be a link to it's corresponding page, but I'm not sure how to do that via jQuery. Any help would be greatly appreciated.
First, enclose the image in an anchor in your HTML: <a><img ....></a>. Put the link next to data-headerimg, in data-headerlink attribute.
Second, update the anchor's href to the same value you're setting the image's src:
var img = $(this).attr('data-headerimg');
var href = $(this).attr('data-headerlink');
$('img#header-img').attr('src', img).parent().attr('href', href);
Sorround it with a href tag in html like
<a id="headerimglink" href=""><img src="" /></a>
set the href attribute along with the src attribute, or you can hardcode it as well if that is not changing.
Why to send an image request and wait a server response with image data? (Some users find it very annoying)
In order to preload your images You can simply create the needed tags and just swap display (with fade?) on item hover.
Let's say:
<ul id="list">
<li>Football</li>
<li>Barbara</li>
</ul>
<div id="images">
<img src="foo.jpg" alt="Foo">
<img src="bar.jpg" alt="Bar">
</div>
#images a {
display:none;
position:absolute;
/* etc */
}
var $imgLink = $('#images a');
$('#list li').hover(function( e ) {
$imgLink.stop().fadeTo(300, 0);
if(e.type=="mouseenter") {
$imgLink.eq( $(this).index() ).fadeTo(300, 1);
}
});

how to automatically resize image to screen size from alt attribute and not src

i have downloaded an image scrollpane which changes the background images. i want to make the images get resized automatically at screen size.. to do this i used this html line
style="width:100%;height:100%;"
but then i realised that this line wont work on my case because the scrollpane works a little bit differently.
to be more specific, the scrollpane will use as background image the alt attribute of the img tag and for the thumbnails of the image it will use the src attribute of the img tag.
<div class="wrapper thumbs_wrapper">
<div class="thumbs">
<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
</div>
</div>
so if i add this line here
<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" style="width:100%;height:100%;"/>
there wont be any change to the background image but only to the thumbnail.. is there any way to resize the image from the alt attribute?
i simply want to grab the img from the alt attribute and resize it with a javascript function and set the width and height to 100%.
i have written this function but it doesn't work..
<script type="text/javascript">
function resize()
{
var element = document.getElementById('imgg');
var attr = element.getAttribute(alt);
attr.width = '100%';
attr.height = '100%';
}
</script>
<img id="imgg" onload="resize()" src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" height='' width=''/>
thank you in advance
try this
<script type="text/javascript">
$(document).ready(function () {
var browserHeight = $(window).height();
var browserWidth= $(window).width();
$('.fullscreen').css({
height: browserHeight ,
width: browserWidth
});
})
</script>
<img id="imgg" class="fullscreen" src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" height='' width=''/>

Get image src from a image in a slideshow

I've been looking around much today and spend a few hours trying to get something done. For a client I am creating a slideshow with a lightbox when clicked on an image. The slideshow and lightbox both work, but I don't get the right image in the lightbox yet.
This is the code that loads the slideshow and when clicked on an image opens the lightbox.
(The images for the slideshow get loaded by a php script and turned into a Javascript array)
<script type="text/javascript">
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/"+galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload = function(){
setInterval("rotateimages()", 1000);
}
</script>
<div style="width: 170px; height: 160px">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style. display='block'">
<img id="slideshow" src="" />
</a>
<div id="light" class="white_content">
<img id="lightImg" src="" />
<script>
var image = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", image);
</script>
I now try to create a variable named "image"and let this contain the src of the current image in the slideshow. So I can load this to the image in the lightbox.
Hopefully some one can give me some usefull tips. I am pretty new in the Javascript language.
The script for the slideshow came from: http://www.javascriptkit.com/javatutors/externalphp2.shtml
Regards Koen.
These days there really is no excuse for using obtrusive Javascript (Stuff inside your HTML attributes, ideally it should be in an external file. http://en.wikipedia.org/wiki/Unobtrusive_JavaScript).
I have done you the favour of cleaning up your code a bit, and changed it where you seemed to be going wrong. As DotNetter has already pointed out it would be sensible to use jQuery in this instance, as it really does simplify things. However, I'm going to assume that for some reason you want it in plain js. Below is a simplification of the code that you posted with the correct change.
<style type="text/css">
.wrapper {
width: 170px;
height: 160px;
}
</style>
<script type="text/javascript">
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/" + galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload = function(){
setInterval("rotateimages()", 1000);
document.getElementById("slideshow").onclick = function () {
var imageSrc = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", imageSrc);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
}
</script>
<div class='wrapper'>
<img id="slideshow" src="" />
<div id="light" class="white_content">
<img id="lightImg" src="" />
</div>
</div>
Before, you were getting the src of the current image when the page loaded, you need to be getting the src of the image when the user clicks on the

Hide Content Loading Gif

I have two large image files in a div on a page that take several seconds to load. How can I hide the loading content while a "loading gif" appears and then have the content appear once it has fully loaded?
I don't really know anything about javascript but I tried using this code. It did half of what I wanted it to do. The "loading gif" worked but the problem was that the content was visible as it was loading.
http://aaron-graham.com/test2.html
<div id="loading" style="position:absolute; width:95%; text-align:center; top:300px;">
<img src="img/parallax/ajax-loader.gif" border=0>
</div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
Any help would be greatly appreciated!
Use jquery, with code like:
$(document).ready(function(){
$('#pic1').attr('src','http://nyquil.org/uploads/IndianHeadTestPattern16x9.png');
});
With the html like:
<img id="pic1" />
It works by running when document's ready function is called (which is called after the DOM and other resources have been constructed), then it will assign the img's src attribute with the image's url you want.
Change the nyquil.org url to the image you want, and add as many as needed (just don't go overboard ;). Tested Firefox 3/chrome 10.
Here is the demo: http://jsfiddle.net/mazzzzz/Rs8Y9/1/
Working off your HTML structure I added a notifyLoaded class for the two images so you can watch for when both have loaded via an onload event. Since css background images don't get that event I've created a hidden img using the background's path so we can test when that image is loaded
HTML:
<div id="loading">
<img src="http://aaron-graham.com/img/parallax/ajax-loader.gif" border="0" />
</div>
<div id="vertical">
<div>
<div class="panel">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/tile3.png" />
</div>
</div>
</div>
<div id="imgLoader">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/deepspace3.jpg" alt="" />
</div>
You have reference to jQuery in your page already so I've replaced your script to the following.
jQuery:
$(document).ready(function() {
var $vertical = $('#vertical');
var $imgs = $('.notifyLoaded');
var imgCount = $imgs.length;
var imgLoadedCount = 0;
$vertical.backgroundparallax(); // Activate BG Parallax plugin
$imgs.load(function() {
console.log(this);
imgLoadedCount++;
if (imgCount == imgLoadedCount) {
// images are loaded and ready to display
$vertical.show();
// hide loading animation
$('#loading').hide();
}
});
});
I've also set #Vertical to a default display:none; which gets changed when images have loaded
CSS:
body {background-color:black;}
#loading {position:absolute;width:95%;text-align:center;top:300px;}
#vertical {display:none;background-image: url('http://aaron-graham.com/img/parallax/deepspace3.jpg');background-position: 0 0;height: 650px;width: 900px;overflow: auto;margin:35px auto auto auto;}
#vertical > div {margin: 0;color: White;}
#vertical .panel {padding: 100px 5%;margin-left:40px;height: 3363px;}
#imgLoader {display:none;}

Categories