Develop Reference

Html5 Video Play on Hover Stops Working When Dynamic Content is Loaded

I have a WordPress site with video products, this code adds a function so that when the mouse hovers over the video thumbnail it starts playing, and when the mouse leaves the video it pauses. It works just fine on the initial page load, but additional content loaded via ajax does nothing.
I'm new to Javascript but I do understand why my code stops working when additional content is loaded via ajax. I just don't know how to make it work. :) I have searched for answers and came across something about using an "on" state, but couldn't figure out how to utilize that with my code.
$(document).ready(function() {
var figure = $(".video").hover( hoverVideo, hideVideo );
function hoverVideo(e) {
$('video', this).get(0).play();
}
function hideVideo(e) {
$('video', this).get(0).pause();
}
});
I know it's not working because the new content isn't "ready" or the script isn't aware of the new content because the page didn't load. So... how do I make this work with dynamic content? Thanks in advance!

I was able to figure it out.
$(document).on({
mouseenter: function () {
$('video', this).get(0).play();
},
mouseleave: function () {
$('video', this).get(0).pause();
}
}, '.video');
Using $(document).on instead of $(document).ready allows it to work for any previous or future loaded ".video" classes to be modified.
The using mouseenter and mouseleave events instead of .hover

jQuery load() and how to know when dynamically added images have finished loading?

With jQuery 3.3.1 load() I am adding content with a few HTML img tags inside and then I want to check the viewport for visible elements AFTER
all the pictures have finished loading.
My problem is that I am unable to know when the dynamically added pictures have been fully loaded in my <div id="#content">.
This is my JS code for loading the new content:
// Replace the #content with content from a file containing a few `img` tags
$("#content").load("image-list.html", function() {
console.log("Now my images have fully loaded???");
});
I have tried this:
// Show me which event is triggered after load()
$(window).on("load resize scroll", function(event) {
console.log(event);
});
// Check if I can get when the images have fully loaded
$("img").on("load", function() {
console.log("Load image event???");
});
I also have tried some black-magic with waiting X milliseconds and looping through all image tags but this is for sure NOT the way to go as it is obscure!
The result of the above is:
I get the Now my images have fully loaded message immediately after I have loaded the file but it does not wait to show the message to after everything has been rendered
I do not get the console.log(event) message at all
I do not get any Load image event messages at all
I am debugging this by slowing down the speed with Chromes network option:

The reason your Load image event??? log is not firing, because you are not late binding the event handler on the images, thus, the on function will not fire for images that were added dynamically to your html.
To late bind, you can modify that function the following way:
$(document).on('load', 'img', function() {
console.log("Load image event???");
});
But if an image takes a long time to load, and you are trying to do something after all the new images were loaded which came from your image-list.html, I suggest something like the below approach:
Try putting the load listener, inside the callback function of the load method, like this:
$("#content").load("image-list.html", function() {
var numberOfImages = jQuery("#content img").length;
$("#content img").one('load', function() {
numberOfImages--;
if (numberOfImages == 0) {
console.log("All the images have loaded");
}
});
$("#content img").each(function() {
if (jQuery(this)[0].complete) jQuery(this).trigger("load");
});
});
You just have to be careful, as apparently, the load event will not fire, if the image you are loading was already cached, and loaded from the cache. There are workarounds for that too.
EDIT: The above code will take care for the situation where the images are loaded from cache also.

MVC How to add a delay on page load

My question is pretty simple(i think, but i cant find any reference, who wants to slow down their site,right?) and may sound ridiculous, but what I am trying to do is to have a splash screen on page load of the Home/Index of my site.
What I did is at the top of my page, I just added a simple div for my splash and use javascript to hide it when the page is loaded.
$(window).bind("load", function () {
// Remove splash screen after load
$('.splash').css('display', 'none')
})
but my problem is, my home index loads too fast (because its just plain text/html) hence the splash screen shows like .5 sec only. I want to add atleast 2-3 secs before it is removed, Im assuming I just need to add a line or two of code in my $(window).bind to pause for a couple of secs before doing $('.splash').css('display', 'none') but I dont know what or how to do it, please help! Thank you!

You can use setTimeout() to delay things in Javascript, like this:
$(window).bind("load", function () {
var delay = 5000;
setTimeout(function () {
$('.splash').css('display', 'none');
}, delay);
});

Timeout works.
$(window).bind("load", function () {
// Remove splash screen after load and 3 seconds
setTimeout(function() {
$('.splash').css('display', 'none')
}, 3000);
});

load gif image while loading the other page using ajax

is there any way that loading GIF image while onclick and simultaneously, navigation should happen.
i tried this way..
$("#Videop").click(function ()
{
//till the time the post function below doesn't return the following image will be displayed
tactile.page.getComponent("loadingnext").show();
$.post("http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/aspx/Video.aspx",
function (data)
{
//get the new HTML content
$("#root").html(data);
});
});
but how about the script files and background function calls associated with that page?

what I understood from your question is, to redirect when #Videop is clicked and show a loading GIF image
$("#Videop").click(function ()
{ //till the time the post function below doesn't return the following image will be displayed
tactile.page.getComponent("loadingnext").show();
window.location.href('http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/aspx/Video.aspx');
});
The above code will show the GIF image, until your page is redirected. Now you will not have the head ache of bringing all the css and script files from that page to here.
EDIT:
in your new page Video.aspx add this, hope this will solve your problem
$(document).ready(function(){
//Display your GIF Image
//tactile.page.getComponent("loadingnext").show();
console.log("I'm loading");
});
jQuery(window).load(function () {
//Hide your GIF image
// tactile.page.getComponent("loadingnext").hide();
console.log('page is loaded');
});

I think what you need is a progress function, and show a waiting image before ajax starts, and hide after ajax ends.
Add a element hidden in the body tag, that could be a image or a loading div.
Define a function.
Call it before and after ajax.
Here is a small demo, hopes to help you out.
#loading{display:none;position:absolute;left:50%;top:50%;width:100px;border:1px solid #ccc;}
<div id="loading">loading...</div>
$.progress = function(stop){
if(stop){
$('#loading').hide();
} else {
$('#loading').show();
}
};
$.ajaxSetup({
beforeSend: function(){
$.progress();
}, complete: function(){
$.progress(true);
}
});
You can change the style by yourself.
jsfiddler was down, I can not write code, sorry about that. :D

How to run a jQuery Code after loading all the images in my page?

How to run a jQuery Code after loading all the images in my page ?

$(window).load(function(){})

Checking to see that all images have loaded is slightly involved, so unless you have a pressing need to be so precise, it is much easier to check that all image and everything else has loaded:
$(window).load(function() { ... });
This makes use of the jQuery .load() method.
If you do really need to check for specifically only images, then things get a little trickier. I initially wanted to do this:
$("img").load(function() { ... }); \\ THIS IS INCORRECT!!!!!
However the above creates a jQuery object that contains all images, and then it binds function() { ... } to each of these images. So the above will trigger a function as many times as there are images on the page!
To get around this, we should check how many images there are on the page, and only fire the function once after all those images have been loaded:
$(function() {
// To keep track of how many images have loaded
var loaded = 0;
// Let's retrieve how many images there are
var numImages = $("img").length;
// Let's bind a function to the loading of EACH image
$("img").load(function() {
// One more image has loaded
++loaded;
// Only if ALL the images have loaded
if (loaded === numImages) {
// This will be executed ONCE after all images are loaded.
function() { ... }
}
});
});
jsFiddle example

$(function() {
var length = $('img').length ;
var counter = 0;
$('img').each(function() {
$(this).load(function(){
counter++;
if(counter == length) {
Callback(); //do stuff
}
});
});
});

I did something like this recently, but went about it differently.
$('img').on('load', function(){
$('img').off('load'); //detaches from load event, so code below only executes once
// my code to execute
});

Not a direct answer. Still worth referring.
Refer
Run JavaScript Only After Entire Page Has Loaded
jQuery callback on image load (even when the image is cached)
Code
$(window).bind("load", function() {
// code here
});

#Peter Ajtai answer will work except on IE's cached images. To make it work with IE, here's a solution: https://stackoverflow.com/a/3877079 or by using the imagesLoaded plugin.

For anyone using jquery this little snippet does the trick (it ensures that all images are loaded before any script inside it are run)...
$(window).bind("load", function() {
// code goes here here
});