[Mootools] Fx.Slide w/ Ajax - displaying "loading..." until images are all loaded...?

Dev Shed Forums Sponsor:

May 2nd, 2008, 08:06 PM

Zorro Swordsman

Registered User

Join Date: Jan 2005

Posts: 27

Time spent in forums: 10 h 19 m 33 sec
Reputation Power: 0

[Mootools] Fx.Slide w/ Ajax - displaying "loading..." until images are all loaded...?

My Test Page

My Ajax Page

I'm using Mootools, so hopefully there's some moo gurus about. As you can see, the Ajax page has a lot of images in it. How do I make a "Loading..." message slide down on my test page when I toggle until all of the images are done loading? Like, when I click to start the Ajax request, how do I make a message slide down that says "Loading..." until all of the images are in the browser cache?

I'm a complete n00b to any form of Javascript, so any help would be greatly appreciated. Thanks.

May 4th, 2008, 05:13 PM

vbrtrmn

I <3 Javascript

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Jan 2004

Location: Northern Virginia

Posts: 1,775

Time spent in forums: 6 Days 21 h 39 sec
Reputation Power: 139

If you're a complete noob, why are you using MooTools? You should take this opportunity to learn javascript, frameworks are nice, but unless you have some fundamental knowledge you're not going to be able to understand what's you're doing.

How do you get started? Let's start with the basics.. Do you know anything about programming? If not, start with some javascript tutorials. I'd setup an array of images and assign onload events, you could do something like this:

Code:

<div id="banners"></div>
	
<script  type="text/javascript">
var imgList = ['headshot_ribbon_1.jpg','headshot_ribbon_2.jpg','headshot_ribbon_3.jpg','mapmedal_ribbon_1.jpg','map  medal_ribbon_2.jpg','mapmedal_ribbon_3.jpg','cqb_ribbon_1.jpg','cqb_ribbon_2.jpg','cqb_ribbon_3.jpg'  ,'koth_ribbon_1.jpg','koth_ribbon_2.jpg','koth_ribbon_3.jpg','sniper_ribbon_1.jpg','sniper_ribbon_2.  jpg','sniper_ribbon_3.jpg','staff_ribbon.jpg','login_ribbon_1.jpg','login_ribbon_2.jpg','login_ribbo  n_3.jpg','donate_ribbon.jpg','medic_ribbon_1.jpg','medic_ribbon_2.jpg','medic_ribbon_3.jpg','loyal_r  ibbon_1.jpg','sig_ribbon_1.jpg','sig_ribbon_2.jpg','sig_ribbon_3.jpg','modding_ribbon.jpg','veteran_  ribbon.jpg','kills_ribbon_1.jpg','kills_ribbon_2.jpg','kills_ribbon_3.jpg','mapping_ribbon.jpg','rif  le_ribbon_1.jpg','rifle_ribbon_2.jpg','rifle_ribbon_3.jpg','purpleh_ribbon.jpg'];
var counter = 0;
for (var i=0;i<imgList.length;i++) {
	var img = document.createElement('img');
	    img.setAttribute('src','banners/'+ imgList[i]);
	    img.onload = function() {
	    	counter++;
			loadTester();
		}
	document.getElementById('banners').appendChild(img);
}
function loadTester() {
	if (imgList.length == counter) {
		alert('your function goes here');
	}
}
</script>

Comments on this post

Joseph Taylor agrees!

__________________
------------- vbrtrmn --------------
i think i'm missing some vowels here
------------------------------------
---------- js.antinoc.net ----------
------------------------------------
--- The Two Types of Programmers ---

Viewing: Dev Shed Forums > Web Design > JavaScript Development > [Mootools] Fx.Slide w/ Ajax - displaying "loading..." until images are all loaded...?

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump

Free IT White Papers!

Accelerating Trading Partner Performance
One in five. That's how many partner transactions have at least one error. That is an amazing statistic, particularly given the extraordinary leaps in innovation across the global supply chain during the past two decades. Download this white paper to learn more.

Competing on Analytics
This Tech Analysis is designed to help identify characteristics shared by analytics competitors, and includes information about 32 organizations that have made a commitment to quantitative, fact-based analysis.

Cost Effective Scaling with Virtualization and Coyote Point Systems
An overview of the industry trend toward virtualization, how server consolidation has increased the importance of application uptime and the steps being taken to integrate load balancing technology with virtualized servers.

Five Checkpoints to Implementing IP Telephony
Implementation planning for IP PBX software and IP telephony has become vital as businesses replace discontinued legacy PBX phone systems. This informative whitepaper outlines five "checkpoints" for any implementation plan that will help make IP communications a successful proposition.

Hosted Email Security: Staying Ahead of New Threats
In the last two years, email has become a fierce battleground between the nefarious forces of spam and malware, and the heroes of messaging protection. The spam volumes increased alarmingly every month, bringing clever new forms of phishing and virus propagation attacks.

More Free IT White Papers!