Fading image after load from ajax call - javascript

I would like to fade in the images after the images have loaded after the ajax call.
This way the fade actually happens instead of the user watching the image load.
May someone help me out?
Here's the JS snippet:
success: function(data){
$('.main-content').load(function() {
$(data).hide().prependTo('.main-content').fadeIn('slow');
});
return false;
},
Data will come in from php echoing something like this:
<div class='left-col-box'>
<div class='album_image'>
<div class='image_settings'>
<button class='delete_button' id='11'>Delete</button>
</div>
<img src='/includes/thumber.php?file=../img/$next_id.$ext&width=218&height=218' />
</div>
</div>
If 2 images were uploaded, there can be 2 left-col-box strings for 2 loaded boxes.
I would like the image to be loaded before the fadeIn.

loader.show() //show some loading image
$('img',data).load(function(){
loader.hide //hide loader once img is loaded
$(data).prependTo('.main-content');
}

If the data in the success callback is the generated HTML you will need to attach it first then hide it and than fading it in.
Not sure $(data).hide() works as expected as at that point data is not in the DOM yet.
Try the following (I don't think you need load):
success: function(data){
$(data).prependTo('.main-content').find('div.album_image img').hide().fadeIn('slow');
return false;
},
DEMO - Loading image and slowly fading it in, using above code
That above DEMO useds the suggested code and prepends the generated HTML, then finds the image tag, hides it and then slowly fades it in.
Off course if you generate the img tag upfront hidden, for example with a display: none or similar then all you should need is:
$(data).prependTo('.main-content').find('div.album_image img').fadeIn('slow');

Related

While background div with video finishes loading, show entire div with loading

I have a div that has a background video whos size is roughly 6mb. I want to show the entire page until that video finishes loading.
I've seen in plenty websites, specially the ones of movies (recent ones) they have background video, and before they show the page, there's like a loading screen.
How can I achieve this? I've been searching around but so far, no luck. Is there a specific name for this technique if you can call it like that?
You can use jquery to achieve this like follows:
$(window).load(function() {
$('PUT_ID_OF_VIDEO_CONTAINER_HERE').hide();
});
I would suggest using the callback on jQuery load() like this >>>
<div id=videoHolder></div>
<div id=loadrHolder></div>
<script>
$( document ).ready(function() {
$('#videoHolder').hide();
$('#videoHolder').load( "myVideo.mp4", function() {
$('#videoHolder').show();
$('#loadrHolder').hide();
});
});
</script
If you are using a library like jquery.videoBG (http://syddev.com/jquery.videoBG/) to show the video, I think you could modify the code to show your page when the video has been loaded.
HTML:
<body>
<div id="dvLoading">Loading...</div>
<div id="dvContent" style="display:none"></div>
</body>
Javascript in library:
$video.bind('canplaythrough',function() {
$('#dvLoading').hide();
$('#dvContent').show();
});
You can find a listing of the events for the video element here: http://www.w3schools.com/tags/ref_av_dom.asp

Gif not running when loading an external page

I Have a huge php table and i want Load it via AJAX to insert a loading gif to the user.
So i'm very noob with this kind of operation and i make a very simple code to do this task.
Here is my code:
$(document).ready(function() {
$("#tableDiv").html('<center><img src="images/loader.gif" /></center>');
$("#tableDiv").load("regulatoryData.php");
});
This is loading the gif but it is not running, it remains static.
How can i correct it?
Any suggestions?
EDIT: When i drag my image to the browser it animates normally.
EDIT 2: Whit just the
$("#tableDiv").html('<center><img src="images/loader.gif" /></center>');
The gif works fine but when i add the second part its starts to run and just after it stops and remain freezed until the regulatoryData appears
EDIT 3: Actually i checked that is not the gif that is freezing but the entire browser.
Sorry about my english :/
Add at the beginning of <BODY>
<img src="images/loader.gif" style="display:none" />
As a "pre-loader"
I've found that IE stops animating GIFs when you start loading another page. I've solved that in one of my own projects by adding a timeout that refreshes the image source 50 ms after the other page starts loading by just assigning it the same value again. In your case that would look something like this:
$(document).ready(function() {
$("#tableDiv").html('<center><img src="images/loader.gif" /></center>');
setTimeout(function() { $("#tableDiv img").attr("src", "images/loader.gif"); }, 50);
$("#tableDiv").load("regulatoryData.php");
});
I would recommend something like the following:
http://jsfiddle.net/NeFaz/1/
Load
<div id="myid">
</div>
$(document).ready(function() {
$("#load").click(function() {
$('#myid').addClass('loading');
$("#myid").load('http://www.confetti.co.uk/shop/', function () {
$('#myid').removeClass('loading');
});
});
});
#myid {
height: 500px;
width: 500px;
}
#myid.loading {
background-image: url('http://koikoikoi.com/wp-content/uploads/2012/07/RESET.gif');
}
This sets the image as a background of the div, but only when a class is applied. We start without this class.
Upon click the load link, we add the loading class to the div and the bg image will display. The function that is used on load fires upon the load finishing, and removes the class from the div therefore removing the image.

Use Basic Javascript Function to Insert Code into Div

I am trying to call up an "example.js" file containing an image gallery (the bulk of the code for the gallery, seeing as how i will have 3 to choose from) using:
<img src="img.jpg" onClick="thisAction()" />
What I want to do is place all of the contained "example.js" code within a div elsewhere in the page. I have a seperate javascript.js file that references the thisAction() function, but I can't seem to figure out where to go from there, nothing is working.
I have tried a load function, and I've delved into ajax, not really knowing what I'm doing... Please help!
Ok, so just to clarify ^^^above^^^, I am not actually trying to call in any javascript in my "example.js", I was simply instructed to do so, because of some reason I can't recall that had to do with recognizing the formatting.... because what I actually want is some html to be inserted, which includes some divs. What i'd like, if possible, is to insert all the code in "example.html" which may contain something like this:
<div id="navbuttonleftcontainer"></div>
<div id="image_holder"><img src="examplepic.jpg" /></div>
<div id="navbuttonrightcontainer"></div>
into a div elsewhere on the page in my existing "gallery.html" by calling the function with the
<img src="examplenavpic.jpg" onClick="thisAction() />
tag.
The closest I've been able to come was with this:
function thisAction()
{
$('#divonmygalleryhtml').html('gallery1.html');
}
But this doesn't actually spit out the above mentioned example.html code, it just puts the text "gallery.html" into the div. I've tryed simply copying all the code from example.html and replacing it with
function thisAction()
{
$('#divonmygalleryhtml').html('
<div id="navbuttonleftcontainer"></div>
<div id="image_holder"><img src="examplepic.jpg" /></div>
<div id="navbuttonrightcontainer"></div>
');
}
But that won't do a thing... Ive tried the last 2 suggestions with no luck... Any suggestions would be great.
Not sure if i get you right. With jQuery's AJAX - function and the HTML - function you can reload code from the server and place it in a div on your page:
$(document).ready(function({
function thisAction(){
$.ajax({
url: "/pathToFile/example.js",
cache: false
}).done(function( data ) {
$("#targetDiv").html( data );
});
}
thisAction();
});
To call a external javascript file you would do
function thisAction(){
var divfill = getElementById(targetDiv);
var newscript;
newscript.src ="example.js";
divfill.innerHTML = (newscript);
}
Hope that works :).
Looks like you can use jQuery then you can use the .load() to load the contents of a remote source to an element
function thisAction() {
$('#divonmygalleryhtml').load('example.html');
}

Problem with two scripts interfering

I'm trying to bring some images from a Tumblr account and to show them using a slider. To bring the images I modified and used a script called tubmlrBadge (http://robertnyman.com/2008/09/19/tumblrbadge-a-tumblr-badge-script/), and to show the images I am using this slider > http://www.meadmiracle.com/SlidingGallery.aspx
If I check using Firebug I can see that the photos are shown okay, but I can't see them in with the slider. I can't figure out what's the problem, I suppose that a problem appears because the slider script must work with content generated by the tubmlr script. I tried placing the slider script after the tumblr one the slider still doesn't works.
You can see a demo of the this at http://www.mctest2.com.ar. If anyone has an idea please help me I tried everything!!
Thanks!
If the script you use to fetch the images was the image-fetcher itself (not a script that calls another script to get a JSON with the image data) you would have used $.getScript with a callback method.
However, your script can't use it, because no matter if the script file is loaded, it will also call another one, that might take longer to be loaded.
I think the only possibility you have is to set an "timer" in your page and wait until the gallery is loaded:
function setSlider() {
var jqelement = $('.gallery img');
if(jqelement.length>0) {
jqelement.slidingGallery();
} else {
setTimeout(setSlider, 200);
}
}
setSlider();
Working example:
http://jsfiddle.net/marcosfromero/5dSgd/

Loading Indicator in Ajax

I know this has been asked and answered many times in this forum. But it does not work in what I am looking for.
I want to display a loading indicator while the ajax div is loading. There are cases when it takes a few minutes to load so it would be good to let the user know that the is loading.
From what I gathered it can be done in jquery. I am not too familiar with jquery yet. With this code the loading works but only for the first page.
$(document).ready(function() {
$('body').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>');
});
$(document).ajaxStart(function(){
$('#ajaxBusy').show();
}).ajaxStop(function(){
$('#ajaxBusy').hide();
});
My page is structured like this
Header Page
-Div (display ajax here)
-Another div within the first loaded page(Load another page through ajax here)
I need it to display the loading indicator in the second div while it's loading. I am assuming that jquery "body" appends it to the main page body once and doesn't run again as it's within the same page. I did try to create a div and instead of body, load the div in jquery but it doesn't work.
Any help will be greatly appreciated.
I found that the easiest way to add the loader gif to specific elements is to create a CSS class with the loader as a background instead of appending an actual image:
.ajax-loader {
background: url(ajax-loader.gif) center center no-repeat;
}
Then you just add that class to the element you are loading and remove it when it is done:
// Removes any loaded images on Ajax success
var removeLoader = function(event, XMLHttpRequest, ajaxOptions)
{
$('.ajax-loader').removeClass('ajax-loader');
};
// Add the ajax loader to a specific element and remove it when successful
$('.div1').addClass('ajax-loader').load('mypage.html', removeLoader);
considering that the div you want to load your image has an id="theDiv"
$(document).ready(function() {
$('#theDiv').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>');
});
Is there a reason you're appending your "ajaxBusy" div via Javascript? Why not just include the HTML on the page itself?
<div id="main">
<div id="ajaxBusy">
<p><img src="ajax-loader.gif"></p>
</div>
</div>
Try binding the ajaxStart and ajaxStop to the ajaxBusy div instead of the document.
$('#ajaxBusy').ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});

Categories

Resources