Develop Reference

HTML, Javascript, Loading page with page + video

I created a loading page for my website but I need some help.
The loading page is visible until the full HTML page is loaded and then it fades out. My problem is, I have a video as a background and I would like to make the loading page visible until my video in the background is loaded.
Is that possible? if you can help me, give advice or other, will be grateful.
Frage
JS Script for fadeout
$(window).on('load', function(){
$('.loading').fadeOut(500);
});
With .loading my css of my div with the loading page content.
Video is after, in the HTML body.

Just an idea based on How to call a function after a div is ready?
jQuery(document).ready(checkContainer);
function checkContainer () {
if($('#IDoftheVideo').is(':visible'))){ //if the container of the video is visible on the page
$('.loading').fadeOut(500);
} else {
setTimeout(checkContainer, 50); //wait 50 ms, then try again
}
}
If you want to know if the video is fully loaded, assuming its HTML5, you can get some ideas here:
http://atomicrobotdesign.com/blog/web-development/check-when-an-html5-video-has-loaded/
I guess it would look something like:
window.addEventListener('load', function() {
var video = document.querySelector('#video');
var loading = document.querySelector('.loading');
function checkLoad() {
if (video.readyState === 4) {
preloader.parentNode.removeChild(loading);
} else {
setTimeout(checkLoad, 50);
}
}
checkLoad();
}, false);

If you want to continue using jQuery and your video uses the video tag you can do
$("#myVid").on("loadeddata", function () {
$('.loading').fadeOut(500);
});
There are many other video events that could be fired as well

Thanks Rantanen, I tried your function with a little change for my page.
window.addEventListener('load', function() {
var video = document.querySelector('#login_background_video');
var loading = document.querySelector('.loading');
function checkLoad() {
if (video.readyState === 4) {
loading.parentNode.removeChild(loading);
} else {
setTimeout(checkLoad, 50);
}
}
checkLoad();
}, false);
I guess it is working well, now I can see my video running after my loading page fadeout. I don't have the time at the moment to learn a lot jQuery, js, ... not yet but soon ! Thanks again. Feel free to improve of someone know well how to code JS and HTML.

Image swap on hover with jQuery: No image after click and de-hover

I implemented a jQuery swap-on-hover image function which goes like this:
// header image hover
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
};
$(function () {
$('img.logoswap').hover(sourceSwap, sourceSwap);
});
It does work perfectly as long as there is no click on the image (which is a link).
But: Once the image is being clicked and the mouse is being placed off the image (so within the seconds while the other page is loading), the image dissapears and only the alt tag is shown.
I wasn't able to recreate it in jsFiddle as they don't allow links within the frame, so here's the live example (removed because problem not visible anymore). The image hover link is the logo on the upper left. The code and markup being used can be seen in this Fiddle, but as mentioned the error I'm talking about cannot.
Is there a way to prevent this behaviour? Like locking in the latest state or something?

Replace img src but have loading graphic display while image is downloading

I have a page that swaps some fairly large images in and out. There are too many to preload when the page initially loads so that is not an option. So what I need to do is load them as they are requested by the user. Right now I'm using jQuery to replace the img's src. This works fine but the images I am loading can be around 500KB and it looks bad as they paint down the screen as they are downloading. What I'd like to do is pop a loading gif on the page when the image is in the process of loading then have the loading gif disappear once the image is loaded. I'm struggling to find a way to do that though. Here is the JS/jQuery code that I have that just replaces the src.
var product = "bowl";
var image = "dog.jpg"; //this is actually pulled from a data attribute, but its just hardcoded here for an example
$("#images img[data-product="+product+"]").attr("src", "/img/tablesetting/"+image);

I made a working jsfiddle showing this principle
http://jsfiddle.net/kasperfish/c72RT/4/
I recently needed to do the same thing. Basically I wrapped the image in a container div. within the container I've added a span element with my ajax loader gif embedded. this span has to be hidden initially but gets visible when an ajax request is made. The span gets removed when the image is fully loaded.
before ajax call
$('#your_image_container').find('span').show();
on success
$('#your_image').attr('src', 'your/image/url').load(function() {
$('#your_image_container').find('span').fadeOut();
});
I made a jsfiddle showing this principle
http://jsfiddle.net/kasperfish/c72RT/4/

Preload the image.
var product = "bowl";
var imageSrc = "dog.jpg";
var imgEl = $("#images img[data-product="+product+"]");
// show loading graphic only if it's needed
var timer = setTimeout(function(){
imgEl.attr("src", "/img/loading.gif");
},50);
// preload image
var img = new Image();
img.onload = function() {
clearTimeout(timer);
imgEl.attr("src",imageSrc);
}
img.src = imageSrc;

$img.attr("src", newImage);
if (!$img.get(0).complete) {
$img
.hide()
.after("<img src=throbber>")
.on("load", function () {
$(this).show().next().remove();
});
}

jQuery image preload

I got a web application, in which there are some images.
Will show a overlay in my page at start and that will automatically fadeout on all images loades.
I need something like this
its rough code
var image1="image1.jpg";
var image2="image2.jpg";
var image4="image4.jpg";
image1 & image2 & image4 loaded then fadeout #preload and show content.
Please help me ... I tried this .. but not working ..
var img1 = new Image();
img1.src = "../images/wall.jpg";
img1.onload = function() {
alert("loaded");
};

var images_loading = $('img').length;
$('img').load(function(){
if(!--images_loading) {
// all images loaded
}
});
Please mind you can't use display:none to hide images.
Using display:none will block image download by your browser. User visibility:hidden instead.

Try this fiddle. I've made it using mostly raw javascript.
If you want, you could use jQuerys .load to replace the onload function, and append to replace appendChild

Need to set 1 span's style to display:block on page load for an image gallery made up of span's set to display:none

i have some javascript in the head of a page that controls an image gallery where the user clicks a thumbnail image and a larger image and some text are revealed in a span. there are 10 of these thumbnails per page and i need to find out how to set the 1st thumbnail's hidden span to "block" on page load.
<script type="text/javascript">
function hideSpan(spanName) {
var obj = document.getElementById(spanName);
obj.style.border="0px";
obj.style.color="#fff";
obj.style.display="none";
obj.style.left="333px";
obj.style.padding="0";
obj.style.position="absolute";
obj.style.top="55px";
obj.style.width="244px";
}
function showSpan(spanName) {
var spanEl, count = 1;
while(spanEl = document.getElementById('link' + count++)){
spanEl.style.display = 'none';
}
var obj = document.getElementById(spanName);
obj.style.display="block";
}
</script>
any help with this is VERY appreciated thank you.

The simple, breezy way is to do this:
<body onload="showSpan('link1');">
The trouble here is that the onload event attached to body that way is executed a little late in the page loading (After all the parts-- including images-- are loaded) so it'll be murder for your dial up users. jQuery implements a much better way:
$(document).ready(function () {
showSpan('link1');
});
If you're not using jQuery, then someone here much wiser than I more than likely knows the correct way to do it using "proper" JavaScript, I don't remember the event name that jQuery uses off the top of my head.