How can i add fade in for this specefic code? I want the pictures to fade in on onload.
Have done some research on Stackoverflow, but couldn't find anything useful. Some help would be appreciated.
<script type="text/javascript">
window.onload = function(){
var img = document.getElementById('img')
if(img.clientHeight<$('#div').height()){
img.style.height=$('#div').height()+"px";
}
if(img.clientWidth<$('#div').width()){
img.style.width=$('#div').width()+"px";
}
}
</script>
Extra question: Is it also possible to add a load-function to this code?
Sj what your attempting to do can be simplified using jQuery. jQuery is a JavaScript library that makes working with HTML documents much easier.
Here is a little fiddle demonstrating their fadeIn method: http://jsfiddle.net/zgRtd/3/
Just to make sure your clear on what's happening:
We declare a function named load Image - this function uses jQuery to attach the fadeIn method to our jQuery object (referenced with CSS Selectors).
The images are set to display: none; initially.
function loadImage () {
$('#your-image').fadeIn('slow', function () {
// Animation complete
});
}
We call the function once the document is loaded (this could be bound to any event), I've commented this out in the JSFiddle example.
$(document).on('ready', function () {
loadImage();
});
Related
I've coded a fancy preloader with jQuery for my project. While my AJAX query is processed it is activated.
I have used to load it:
$(document).ajaxStart(function) () {
#preloder is displayed
}
And to stop it:
$(document).ajaxStart(function) () {
#preloder is turned off
}
Problem is my AJAX returns images src that are then diplayed in a <div> but some of the pictures are really heavy and most of the time my preloader stops before my pictures are completely loaded.
I went through jquery documentation and found a .load(function). But it seems that it has been removed from jQuery. It seems that it has been replaced by .trigger("load"). Can it be useful for my problem? I tried to implement it but with no sucess.
Quick answer from #Aureliano Far Suau that worked beautifully for me. No plugin needed:
$('img').on('load', function() {
// do something
});
For multiple images:
var loaded = 0;
$('img').on('load', function() {
loaded++;
if(loaded == $('img').length){
// do something
}
});
I need some help with my code, This is what my HTML looks like:
<body onLoad="loader();">
<div class="loader"><img src="images/loader.gif></div>
<div class="main"></div>
CSS:
.main {
display:none;
}
So, the loading Gif Is shown, and then when the page fully loads, it should do this:
function loader() {
setTimeout(function () {
$("#main").fadeIn("fast");
$("#loader").fadeOut("fast");
}, 1000);
};
But all it does, is that the loader div disappears, then the main div appears like it should for a split second, then just dissappears. Thanks in advance for any help. #:)
I think you mean for the loader to fade out after main has faded in, in which case you'll need to take advantage of the callback argument.
You can also use delay() rather than setting a timeout.
You should also use $(document).ready() rather than invoking the function in the onload="" handler.
$(function(){
$('.main').delay(1000).fadeIn('fast', function(){
$('.loader').fadeOut('fast');
});
});
Noted by Blauharley: You are targeting elements with an ID of main (and loader), whereas the elements in your markup use classes.
I'm having a problem with a delay caused between the completion of:
var href = $('.mainNav').data('href');
$('#slideshow').load(href);
This calls up a file which only contains an unsorted list and places it as the content of #slideshow. That part is in a $(document).ready function.
The next bit of code calls the plugin jCarousel to style the content of #slideshow and is outside the $(document).ready function:
$(window).bind('load', function () {
$('#mycarousel').jcarousel();
});
The problem I'm having is that there's a slight delay between the list being loaded and the plugin formatting the list in which it is completely un-styled. Is there some way to make the second piece of code run before the list itself is displayed?
You could hide it with CSS:
#mycarousel {
display: none;
}
And then display it once the jcarousel is set up:
$(window).bind('load', function () {
$('#mycarousel').jcarousel();
$('#mycarousel').show();
});
Also, I think it's strange that you're using $(window).bind('load', ...) with .load(), as .load() will not trigger a load event on window. Perhaps you should be using a callback for .load() sort of like:
$('#slideshow').load(href, function () {
$('#mycarousel').jcarousel();
$('#mycarousel').show();
});
I'm using Phonegap to build a small (test only) Macrumors application, and remote hosts actually work (there is no same host browser restrictions). I am using the jQuery Load() function to load the contents of the Macrumors homepage http://www.macrumors.com/ into a bin, hidden div, then the each function to loop through all the article classes to show the title in a box with a link to the page.
The problem is, after the Macrumors HTML content is loaded, the each function doesn't work with the article class. Also, in the load function (which allows you to specify certain selectors, id's and classes included, to only load in those sections of the page) the class doesn't work; none of the classes do, in both the load function and each function. And many Id's don't work in the each function either.
Can anybody explain this to a noob like me?
Here is the code:
function onDeviceReady()
{
// do your thing!
$('#bin').load('http://www.macrumors.com/ #content');
$('.article').each(function(){
var title = $('a').html();
$('#content').append('<b>'+title+'</b>')
});
}
And the HTML stuff
<body onload="onBodyLoad()">
<div id="bin">
</div>
<div id="content">
</div>
</body>
I sincerely apologize if there's some very simple mistake here that I'm missing; I'm a major JS newbie.
.load() is asychronous. It hasn't completed yet when you're executing .each(). You need to put your .each() and any other code that wants to operate on the results of the .load() in the success handler for .load().
You would do that like this:
function onDeviceReady()
{
// do your thing!
$('#bin').load('http://www.macrumors.com/ #content', function() {
$('.article').each(function(){
var title = $('a').html();
$('#content').append('<b>'+title+'</b>')
});
});
}
I'm also guessing that your .each() function isn't working quite right. If you want to get the link out of each .article object, you would need your code to be like this so that you're only finding the <a> tag in each .article object, not all <a> tags in the whole document:
function onDeviceReady()
{
// do your thing!
$('#bin').load('http://www.macrumors.com/ #content', function() {
$('.article').each(function(){
var title = $(this).find('a').html();
$('#content').append('<b>'+title+'</b>')
});
});
}
I’m using jQuery for my project. $(function(){...}) fires the function “when the DOM is ready” — this doesn’t say that all images are loaded, right?
Is there an event that gets fired when every image is loaded too?
I guess you mean
http://api.jquery.com/ready/
versus
http://api.jquery.com/load-event/
Example: Run a function when the page is fully loaded including graphics.
$(window).load(function () {
// run code
});
without jQuery:
window.onload=function() {
alert(document.images.length);
}
You can check on load event of image tag. This will get fired when image loading completes.
$("img").load(function(){
// your code
});
window.onload will solve this, I wrote about this there: http://amrelgarhy.com/blog/how-to-tell-when-images-have-loaded/