Gif not running when loading an external page - javascript

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.

Related

Load a jquery event only after the preloader ends

My website is : https://365arts.me/
So it loads about 16mbs of pics(Yes I know, I'm stupid. I'll try to change it very soon, also if someone could tell me a way to reduce size of do something else(like dynamic loading only when needed, if something like that exists) I'd be very grateful).
I added a preloader for it using:
[html]:
<div class="spinner-wrapper">
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
and corresponging [jquery]:
<script>
$(document).ready(function() {
//Preloader
$(window).on("load", function() {
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
});</script>
this works well but the problem is I have a javascript code that comes and says Hi! but it runs only for 2.8 seconds. So if loading takes up more than that, It doesnt show up. Can someone please tell me how to make sure that it loads only exactly after loading is completed.
Thanks a ton.
Code for my website:
https://github.com/richidubey/365-Days-Of-Art/blob/master/index.html
this may work
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
if you are happy with pure javascript
My first suggestion is to just get rid of the "Hi!" message since you already have a splash page in the form of the loader. But if you really want that second splash page, you can use the JQuery when() method:
$(window).on("load", function() {
$.when($('.spinner-wrapper').fadeOut(500)).then(displaySplashPage);
});
This assumes that displaySplashPage() is your function for showing the "Hi!" message.
You don't need $(document).ready() and window.on("load") here. Document ready waits for the HTML to be built, then applies event listeners/functions/etc to the structure. Window onload waits for everything to get loaded, then fires. In your case, you're trying to wait for all your pictures to load, so you only need onload.
You might need to have a container around all your main content set to opacity: 0 that switches to opacity: 1 as part of displaySplashPage(). That would prevent things from leaking through as you do the .fadeOut() on the loader.
JavaScript version - run js code when everything is loaded + rendered
window.onload = function() {
alert("page is loaded and rendered");
};
jQuery version (if you need it instead pure JS)
$(window).on('load', function() {
alert("page is loaded and rendered");
});
You can try this:
<script>
// Preloader
$(window).on("load", function() {
fadeOutTime = 500;
sayHelloDuration = 5000;
function hideSayHello() {
var sayHello = $('.say-hello');
sayHello.fadeOut(fadeOutTime);
}
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(fadeOutTime);
setTimeout(function() {
hideSayHello();
}, sayHelloDuration);
}
hidePreloader();
});
</script>
Also, remove the code from lines 83 ~ 87:
<script>
$(document).ready(function() {
$('.say-hello').delay(2800).fadeOut('slow');
});
</script>
About your website performance, you can improve a lot of things right now:
Use smaller thumbnail images on your front page, don't load FULL SIZE images at once. "work-showcase" section is really heavy without real necessity.
Try to incorporate src-set and smaller images for small screens, larger/heavier images for bigger screens. All modern browsers support it, and it will improve performance/loading speed.
Try to lazyload your big images, e.g. only when users scroll down to them, not before. It may take some work to integrate it with your image viewer, but it will additionally speed things up on initial load. My favorite library for this is this one: https://github.com/aFarkas/lazysizes but, you may find something else...
Unrelated to your original question, I have noticed that you have a bug in your HTML - see this screenshot. What kind of code editor do you use? Instead of empty space it apparently inserts invisible dots symbols which are not good. Actually, it's not the invisible dot (that's my editor's space indentation symbol), it's caused by 2 long dash (instead of short dash or minus) in your code after opening html comment tag:

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

jquery lazy loading plugin

I am creating a portal using large number of images. For smoothness I add lazy loading plugin to this portal
This is the plugin http://www.appelsiini.net/projects/lazyload
I used this code for initializing the plugin:
$(function () {
$("img.lazy").lazyload({
effect: "fadeIn"
});
});
Image url is like this:
<a href="#">
<img src="/public/images/dflt_03.jpg" data-original="<?php echo $this->magImg;?><?php echo $top['img_path'];?>" width="180" height="230" alt="cover" class="lazy">
</a>
This worked perfectly. But my problem is that after loading the page there is no image for displaying. after mouse scroll takes place this will show images. I want to show some images before it will be scrolled.
There is no markup provided of your html page, but since the concept of lazy loading is that images get loaded only when needed, that is when they appear in the viewport, probably triggering a scroll or resize event on window or body should work. Try any of these after page load (or, better, when lazy loading complete callback gets called):
$("html, body").trigger("scroll");
$(window).trigger("resize");
See the fix proposal here
I checked the plugin and changed this line in the update method:
if (settings.skip_invisible && $this.css('display') === 'none') {
//if (settings.skip_invisible && !$this.is(":visible")) {

Fading image after load from ajax call

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');

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