How to show a loader image while a page loads slowly - javascript

I have db query in my page which fetches a lot of data at time and shows it on the page. FYI, I can not use pagination. So I just want to show a loader image till the time the query fetches all the data and show on the UI. I have tried this code for example, but its not working,
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('processing.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>
</head>
<body>
<div id="page">
<div class="loader"></div>
<cfquery datasource="dsn_spinlife_prod_new" name="qryGetProdList">
SELECT *
FROM tbl_products;
</cfquery>
</div>
</body>
</html>
But its not working , still firefox show a blank white page while the page loads.I have tried with document.ready also, not working. I want the loader image to be shown , How it can be done, I think i am missing something .

The problem is most likely that the browser doesn't even get your page until all the slow DB work has been done. You could try putting a <cfflush> into the script above after your loader div. That'll cause CF to send back everything generated up to that point back to the browser at that point.
Bear in mind that once you've called <cfflush> you can no longer set cookies or send redirects, so you'll want to examine your code to ensure that there's none of that later on in the code.
The other approach would be to generate a page with nothing but a placeholder in it and use jQuery to load in the results as a separate request:
<script>
$('#results').load('results.cfm',function(){$('.loader').hide()});
</script>
<div class="loader">Loading...</div>
<div id="results"></div>
Where results.cfm runs the query and generates the HTML necessary to complete the page.

Related

JavaScript erratic with starting point funciton

fairly new to js. I have a simple project in which all I have is an image twice the height of the screen. I want the webpage to open at the bottom of the page, so I have added the "window.scroll" funtion method in javascript. This works fine... most of the time. Sometimes, particularly if I test on a mobile device with a home server, the javascript just doesn't fire up and the page starts at the top. So my main question is: is there a way to do the same as "window.scroll" but with CSS, bypassing js altogether? And a second question I would have is, why is javascript so flaky? I am really new to web development and I have already twice (the other time with the "slide" method) had to use css instead of js because js doesn't work properly, or it needs to be cached etc... is this normal behaivour or just me really bad at writing it at this point? Thanks for your time. P
Here's the simple code:
$(document).ready(function(){
window.scroll(0,2000);
});
body {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img src="https://pixabay.com/static/uploads/photo/2016/10/18/21/22/california-1751455_960_720.jpg" width="100%" style="display: block;">
</body>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
}
JavaScript:
$(document).ready(function(){
window.scroll(0,2000);
});
I think the problem is that the image takes time to load.So I think your event is fired however the image loads later and changes the page size again. The load event will fire after images are loaded.
try this code instead:
$(window).on("load", ,function(){
window.scroll(0,2000);
});

I can't use Slimscroll in a very small Iframe?

I am trying to get my code working with a small Iframe I made. The site where it has to be used is running on the Enjin network and it doesn't allow PHP so I had to use an Iframe to get the PHP to work. It now displays a loading gif while it is loading the data and that works perfectly fine.
However,
What I want is this loading gif and Slimscroll to work. I can't get these 2 to work together nor can I get Slimscroll to work. I have to use a limited HTML editor which allows the use of scripts (I believe) but following the steps I cannot get it working!
Here's my code
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="libs/jquery.slimscroll.min.js"></script>
<script>
$(function(){
$('#inner-content-div').slimScroll({
height: '250px'
});
});
</script>
<div id="loadImg" style="background-image: url(http://sander.server2.tmg-clan.com/loading.gif);
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
">
<div name="scroll" onload="document.getElementById('inner-content-div');">
<iframe border="0" name="iframe" src="http://sander.server2.tmg-clan.com" onload="document.getElementById('loadImg').style.backgroundImage='none';" scrolling="non></iframe>
</div>
</div>
What am I doing wrong? What do I need to add? the website it is running on is:
The Brothers Production network and my code is the top bar on the right!
Please help me out!

Coinbase custom pay button not working

I would like to make my own custom Coinbase payment button and have the following code which is just a copy paste of "Using Your Own Button And Custom Javascript Events" example.
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<a href='#' class='my-custom-link'>Show Me The Modal!</a>
<div class="coinbase-button" data-code="4d4b84bbad4508b64b61d372ea394dad" data-button-style="none"></div><script src="https://coinbase.com/assets/button.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.my-custom-link').click(function(){
$(document).trigger('coinbase_show_modal', '4d4b84bbad4508b64b61d372ea394dad');
return false;
});
$(document).on('coinbase_payment_complete', function(event, code){
console.log("Payment completed for button "+code);
window.location = "/confirmation.html";
});
});
</script>
</body>
</html>
However it does not work. Any ideas why?
'Show Me The Modal!' link is displayed. The $('.my-custom-link').click() function is called. Using Google Chrome I can see that an iframe is loaded with what I assume is the modal dialog code containing payment instructions. However nothing happens when I click on the 'Show Me The Modal!' link.
I think I have solved it. I tried it out with your code and it does not work as you said. I took the time to modify it a little bit and it works now. http://pastie.org/8687468 Please let me know if what I fixed was intended.
The code isn't working because coinbase.com blocks custom buttons from working after triggering them with custom scripts too much
Ask a friend to test your code, it should work for other people.
I'm having the same issue. Deleting browser cookies, cache, flash cookies, changing IP doesn't work. I guess the only solutions are:
wait for the ban from coinbase.com to expire
contact support about it
don't do anything, it's working, but not for you
Update:
A working solution/hack that I found was using the default button, hiding it with opacity: 0; and putting it on top of your custom button. That way you can make it look like the user is clicking the custom button, when in fact, he's clicking the hidden default button (which works).
Here's a demo: http://jsfiddle.net/uaMdX/show
Code demo: http://jsfiddle.net/uaMdX/
<a href='#' class='my-custom-link'>Show Me The Modal!</a>
<div class="coinbase-button" data-code="4d4b84bbad4508b64b61d372ea394dad" data-button-style="small"></div>
<script src="https://coinbase.com/assets/button.js"></script>
<style>
#coinbase_button_iframe_4d4b84bbad4508b64b61d372ea394dad {
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 140px!important;
height: 18px!important;
margin-left: 7px;
margin-top: 10px;
/*
debugging_code: uncomment_to_show_the_button;
opacity: 0.5;
outline: 1px solid red;
*/
}
</style>
*If your needs are more specific you should use jQuery to dynamically add the styles/position the iframe for the hidden button.
Try creating another page, and put only what coinbase gives you. If that works then it is probably a Issue on your side. If not, let me know.

show loading image while the page is loading

I want to show a Loading image when the page is not loaded yet. Before loading the page it shows a blank white page to the user. So, i want to remove the white blank space.
The page makes too many database hits, so it loads a bit slowly.
I've checked this post, but that doesn't work.
I've checked by adding <![CDATA[ infront of the script, as it stated in the blogpost.
That doesn't work.
Finally i've landed in Asking a Question, though it is a duplicate.
Here is my script finally.
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(window).load(function () {
$("#divLoading").fadeOut("slow");
});
// ]]>
</script>
and in the body
<body style="background-color: white;">
<div id='divLoading'>
<div class="loading" align="center" id="divImageLoader">
<img src="../../ItemSelectorImages/ajax-loader_bluish.gif" alt="Loading..."/> Loading
</div>
</div>
</body>
The CSS of loading is:
.loading
{
font-family: Arial;
font-size: 10pt;
padding:20px;
position: fixed;
background-color: #ffffff;
z-index: 99999;
border-radius:5px;
}
What was wrong with my code ? Can someone point out or give working solution.
Cheers !!!
Karthik
I got the solution to this question.
The problem is not with the height of the div element nor the Images/CSS problem.
The problem is with another script that is executed right after the window load completes, the script includes the DOM ready and remaining javascript function(s).
I've removed the next script that is executed after the window.load and placed after end of the body tag.
<body style="background-color: white;">
<div id='divLoading'>
<div class="loading" align="center" id="divImageLoader">
<img src="../../ItemSelectorImages/ajax-loader_bluish.gif" alt="Loading..."/> Loading
</div>
</div>
</body>
//The following second script is placed here so as to load after the body load is complete.
<script>
includes DOM Ready, and some javascript functions to be called.
</script>
Assumption: I think after the $(window).load(function () { script is done, there should not be any other scripts further running.
Thanks to all the guys who commented.
If my assumption is wrong, please mention what the real problem that stopped the loading image to show up.

How to delay the display of some HTML until after javascript has loaded

When a page loads on my site, the HTML appears before the javascript, which leads to a flicker when the javascript loads. The answer to this stackoverflow post gave a great solution. But I would like to load at least some of the HTML before the Javascript so that the user is not faced with a blank page during a slow connection. For example, I would like to load the header immediately, but wait to load the HTML for the javascript enhanced accordion until after the javascript loads. Any suggestions?
Here's the code that I borrowed from the answer linked above:
CSS:
#hideAll
{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
z-index: 99; /* Higher than anything else in the document */
}
HTML:
<div style="display: none" id="hideAll"> </div>
Javascript
window.onload = function()
{ document.getElementById("hideAll").style.display = "none"; }
<script type="text/javascript">
document.getElementById("hideAll").style.display = "block";
</script>
I'd suggest that you define the base/JavaScript-enabled styles of elements you want to display with CSS in the regular style block:
<style type="text/css">
#javaScriptAccordion {
display: none;
}
</style>
And then use the noscript tags (in the head) to amend this in the absence of JavaScript:
<noscript>
<style type="text/css>
#javaScriptAccordion {
display: block;
}
</style>
</noscript>
This ensures that the content is hidden on document load, preventing the flash, but visible to those users that have JavaScript disabled.
The above has been amended to prevent the 'flash of no content' (as described by #Josh3736 in his answer), and now uses opacity to hide the content:
<style type="text/css">
#elementToShowWithJavaScript {
opacity: 0.001;
width: 50%;
margin: 0 auto;
padding: 0.5em;
border-radius: 1em 0;
border: 5px solid #ccc;
}
</style>
<noscript>
<style type="text/css">
#elementToShowWithJavaScript {
opacity: 1;
}
</style>
</noscript>
Live demo.
I'm not, unfortunately, entirely sure that I understand your question. Which leaves me proposing a solution for the question I think you asked (all I can offer, in excuse, is that it's early in the UK. And I'm not awake by choice...sigh); if there is anything further that I'm missing (or I'm answering the wrong question entirely) please leave a comment, and I'll try to be more useful.
The hack in the linked question is—in my opinion—very poor advice. In this case, it is a better idea to include some script directly following your accordion elements.
<div id="accordion">...</div>
<script type="text/javascript">...</script>
However, inline script intermingled with your HTML markup is a Bad Idea and should be avoided as much as possible. For that reason, it is ideal to include inline only a function call to a function declared in your external script file. (When you reference an external script (<script src="...">), the rendering of your page will pause until it has loaded.)
<html>
<head>
<script type="text/javascript" src="script.js"></script> <!-- renderAccordion() defined in this file -->
</head>
<body>
...
<div id="accordion">...</div>
<script type="text/javascript">renderAccordion();</script>
...
</body>
</html>
Of course, the correct way to do this is to just attach to the DOM ready event from script.js and not use any inline script at all. This does, however, open up the possibility of a content flash on extremely slow connections and/or very large documents where downloading all of the HTML itself takes several seconds. It is, however, a much cleaner approach – your script is guaranteed to be loaded before anything is rendered; the only question is how long it takes for DOM ready. Using jQuery, in script.js:
$(document).ready(function() {
// Do whatever with your accordion here -- this is guaranteed to execute
// after the DOM is completely loaded, so the fact that this script is
// referenced from your document's <head> does not matter.
});
Clever use of <style> and <noscript> does a a good job of guaranteeing that there is no flash of all the content in your accordion; however, with that method there will be the opposite effect – there will be a flash of no content.
As the page loads, your accordion will be completely hidden (display:none;), then once your script finally executes and sets display back to block, the accordion will suddenly materialize and push down everything below it. This may or may not be acceptable – there won't be as much movement, but things will still have to jump after they've initially rendered.
At any rate, don't wait until onload to render your accordion. onload doesn't fire until everything—including all images— have fully loaded. There's no reason to wait for images to load; you want to render your accordion as soon as possible.

Categories

Resources