How can i know if all <img> loaded in div using jQuery - javascript

How can i know if all loaded in div using jQuery
i want to do this after load all img in #slider div
var imgHeight = $("#slider img").height();
alert(imgHeight);

You can use the load event
$('#slider img').load(function(){
var imgHeight = $(this).height();
alert(imgHeight);
});
if there are more than one image, and you only want to obtain the height after they have all loaded, try this code
var img = $('#slider img');
var length = img.length;
img.load(function(){
length--;
if(length === 0){
alert("All images loaded");
};
});
Well, I've tested the code, and it appears that the problem hasn't got anything to do with the code. When loading the page with the images already in the cache, this is what I get:
Strangely, this does not occur when I force the browser not to use the cache.

Try this:
Attach an onload event listener to each image in the slider.
In the listener:
Give the current image a custom attribute to mark it is 'ready'.
Check if all images are ready. If so, do your thing (i.e. alert(imageHeight))
untested:
(function(){
var slider=document.getElementById('slider'),
images=slider.getElementsByTagName('img'), image, i=-1;
while (image=images[i]) {
image.onload=function(){
this['data-ready']=true;
var image, i=-1;
while (image=images[i]) if (!image['data-ready']) return;
// all images are ready; do your thing here
// ...
}
}
}());

Related

Execute js after all image loaded not working

(not duplicate, because not find exactly/easy solution)
I'm trying to execute JS after all images completely loaded. My goal is, when all images finish load completely, then removeClass my-loader and addClass visible to main-slider div.
HTML:
<div class='main-slider my-loader'>
<img src="https://unsplash.it/200/300/">
<img src="https://unsplash.it/200/300/">
<img src="https://unsplash.it/200/300/">
</div>
Execute below js when all images completely loaded
$(".main-slider").removeClass("my-loader").addClass("visible");
Tried this js :
But not works properly on my site, problem is when i clear browser cache, then it works/execute! when i reload page then next time it's not works/execute! It only works when i clear browser cache.
var img = $('.main-slider img')
var count = 0
img.each(function(){
$(this).load(function(){
count = count + 1
if(count === img.length) {
$('.main-slider').removeClass('my-loader').addClass('visible')
}
});
});
Any simple solution? Thanks in advance.
jQuery provides a way to register a callback for the window load event which will fire when the entire page, including images and iframes, are loaded.
Reference: https://learn.jquery.com/using-jquery-core/document-ready/
Your code should look something like:
$( window ).load(function () {
var img = $('.main-slider img')
var count = 0
img.each(function(){
$(this).load(function(){
count = count + 1
if(count === img.length) {
$('.main-slider').removeClass('my-loader').addClass('visible')
}
});
});
});
Here's how to do this, using Deferreds and native handlers, and calling the onload handler if the image is cached in older browsers etc.
var img = $('.main-slider img');
var defs = img.map(function(){
var def = new Deferred();
this.onload = def.resolve;
this.onerror = def.reject;
if (this.complete) this.onload();
return def.promise();
});
$.when.apply($, defs).then(function() {
$('.main-slider').removeClass('my-loader').addClass('visible')
});

100% fully show image before fading in

I have 2 images. My intention is when the image finished display, and finished fade in, I will load some function.
My question
How do I make sure my image is fully loaded and displayed on screen?
I ask because sometimes, when the image is still loading (like only half the image is showing), it will fade in somehow, I need make sure it shows the full image before fading in.
FIDDLE
var temp = "";
var displaythumbnailbox = $(".area1");
var lis = $(".area1 img");
//hide the image , in order to use fadein
lis.hide();
lis.each(function(i) {
$(this).fadeIn('fast', function() {
console.log("finish load all image");
if (i == lis.length - 1) {
//getting last image display.
alert("finish display the last image");
//going to put some function here.
}
});
});
You can substitute css display:none for .hide(), .ready() , .promise()
css
.area1 img {
display:none;
}
javascript
$(document).ready(function() {
var temp = "";
var displaythumbnailbox = $(".area1");
var lis = $(".area1 img") //.hide()
.each(function(i) {
$(this).fadeIn("fast", function() {
console.log("finish load all image");
});
});
lis.promise().then(function() {
alert("finish display the last image");
})
})
jsfiddle https://jsfiddle.net/88ft369z/3/
If you want to display images in sequence you can substitute i multiplied by a duration, e.g., i * 250 at .each() for "fast" jsfiddle https://jsfiddle.net/88ft369z/4/
You can check if the element is loaded using .load().
var lis = $(".area1 img");
lis.load(function(){
lis.hide();
lis.each(function(i) {
$(this).fadeIn('fast', function(){
console.log("finish load all image");
if(i == lis.length -1)
{
//getting last image display.
alert("finish display the last image");
//going to put some function here.
}
});
});

Initializing a plugin AFTER a foreach loop

So I'm trying to implement stellar.js but it must be initialized after an each loop is finished. The loop must add data attributes to the images that are going to be made parallax by the plugin.
The images are in a list:
<ul>
<li class="item">
<div class="item-image" data-stellar-background-ratio="0.7" data-image="http://picjumbo.picjumbocom.netdna-cdn.com/wp-content/uploads/IMG_7706-1300x866.jpg"></div>
</li>
...
</ul>
I must add data-stellar-vertical-offset attribute to each of them that will offset the image by half of its height, so it can be vertically centered initially.
Here is the JS:
/* Inserting the background image */
$('.item-image').each(function () {
var $this = $(this);
$this.css('background-image', 'url(' + $this.data('image') + ')');
})
/* Creating loop that will run as many times as items are in there */
var items = $('.item-image').length;
var currentItem = 0;
$('.item-image').each(function () {
var $this = $(this);
/* Taking the origin height, halving it and putting it as offset so the image can be vertically aligned */
var img = new Image();
img.src = $(this).data('image');
img.onload = function () {
var H2 = this.height;
$this.attr('data-stellar-vertical-offset', -(H2 / 2));
}
currentItem++;
/* Initializing the plugin after every item is looped */
if (currentItem >= items) {
$.stellar();
}
})
However when the plugin is initialized it isn't using the data attribute. If it's put in a timeout like this:
if (currentItem >= items) {
setTimeout(function () {
$.stellar();
}, 10)
}
.. it works but it seems to me like an ugly hack. Is there a better way for this to be done?
Here is a jsfiddle: http://jsfiddle.net/9f2tc/1/
I believe what you want is to initialize stellar once after all the images have been downloaded. The simplest approach is to check each time in the onload handler:
img.onload = function () {
var H2 = this.height;
$this.attr('data-stellar-vertical-offset', -(H2 / 2))
if (++currentItem === items) {
$.stellar();
}
}
jsfiddle: http://jsfiddle.net/X6e9n/2/
However, there are issues with the onload event not firing for images in certain cases. See the caveats section on the jQuery page: http://api.jquery.com/load-event/ The problems listed apply to the load event itself not just jQuery's .load() See Javascript callback for knowing when an image is loaded for solutions. The first answer notes the handler should be attached before the src attribute is set, which you don't do here, but it doesn't seem to be a problem for me in this case.

javascript preloader/progress/percentage

I'm having trouble finding any good information on how to make a javascript(or jquery) progress bar WITH text that tells you the percentage.
I don't want a plug in, I just want to know how it works so that I can adapt it to what I need. How do you preload images and get a variable for the number of images that are preloaded. Also, how do you change html/css and-or call a function, based on the number of images that are loaded already?
<img> elements have an onload event that fires once the image has fully loaded. Therefore, in js you can keep track of the number of images that have loaded vs the number remaining using this event.
Images also have corresponding onerror and onabort events that fire when the image fails to load or the download have been aborted (by the user pressing the 'x' button). You also need to keep track of them along with the onload event to keep track of image loading properly.
Additional answer:
A simple example in pure js:
var img_to_load = [ '/img/1.jpg', '/img/2.jpg' ];
var loaded_images = 0;
for (var i=0; i<img_to_load.length; i++) {
var img = document.createElement('img');
img.src = img_to_load[i];
img.style.display = 'hidden'; // don't display preloaded images
img.onload = function () {
loaded_images ++;
if (loaded_images == img_to_load.length) {
alert('done loading images');
}
else {
alert((100*loaded_images/img_to_load.length) + '% loaded');
}
}
document.body.appendChild(img);
}
The example above doesn't handle onerror or onabort for clarity but real world code should take care of them as well.
What about using something below:
$('#btnUpload').click(function() {
var bar = document.getElementById('progBar'),
fallback = document.getElementById('downloadProgress'),
loaded = 0;
var load = function() {
loaded += 1;
bar.value = loaded;
/* The below will be visible if the progress tag is not supported */
$(fallback).empty().append("HTML5 progress tag not supported: ");
$('#progUpdate').empty().append(loaded + "% loaded");
if (loaded == 100) {
clearInterval(beginLoad);
$('#progUpdate').empty().append("Upload Complete");
console.log('Load was performed.');
}
};
var beginLoad = setInterval(function() {
load();
}, 50);
});
JSFIDDLE
You might also want to try HTML5 progress element:
<section>
<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
<script>
var progressBar = document.getElementById('p');
function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
} </script>
</section>
http://www.html5tutorial.info/html5-progress.php

jQuery event listener for fully loaded DOM with dynamic content

I'm trying to use jQuery script to align height of two divs. Everything works fine until I have some dynamic content in one of divs.
When I hardcode some static content in one of divs like:
<br>asd<br>asd<br> x 20
both divs has the same height property, but when I load some data from DB to one of divs, they are different.
I guess that the problem is in .ready() listener. Documentation says that it fires when DOM is fully loaded but it looks like it's not the truth.
My question is: what kind of listener or other 'trick' should I use? I think that jquery/javascript solution is cleaner than messing with css and I would like to have this kind of solution.
Thanks in advance.
jquery script:
$(document).ready(function(){
var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();
if(difference<0)
{
var height = $("#layout-content-wrapper").height() -1;
$("#layout-navigation-wrapper").height(height);
}
else if(difference >= 0)
{
var height = $("#layout-navigation-wrapper").height() -2;
$("#layout-content-wrapper").height(height);
}
});
jquery in the base work with event document.ready is means when all DOM is ready until here make the jquery code. is for don't have a option to render jquery code without render jquery library
if you want to add event just when all the dom is loaded include content and images you need to do this
$(document).ready(function(){
$(window).load(function(){
var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();
if(difference<0)
{
var height = $("#layout-content-wrapper").height() -1;
$("#layout-navigation-wrapper").height(height);
}
else if(difference >= 0)
{
var height = $("#layout-navigation-wrapper").height() -2;
$("#layout-content-wrapper").height(height);
}
});
});
You can use window.onload to execute a script once a web page has completely loaded all content including images, script files, CSS files, etc.
window.onload = function() {
var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();
if(difference<0)
{
var height = $("#layout-content-wrapper").height() -1;
$("#layout-navigation-wrapper").height(height);
}
else if(difference >= 0)
{
var height = $("#layout-navigation-wrapper").height() -2;
$("#layout-content-wrapper").height(height);
}
};

Categories