Yahoo! UI Library: ImageLoader problem

W

wibni

Hi,

I'm trying to get a working example of the Yahoo! Imageloader.
I've done everything as explained here - http://developer.yahoo.com/yui/imageloader/
- but can not get it to work.
The aim is to have 2 separate images loading together at the same
time.
What it does though is just showing me my background images as defined
in the CSS code.
I need it to overwrite these settings with the images defined in the
javascript code.

Posted the same question here: http://www.tek-tips.com/viewthread.cfm?qid=1553312&page=1




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/
build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/
build/imageloader/imageloader-min.js"></script>
<script>

var duoGroup = new YAHOO.util.ImageLoader.group('content_start',
'load', 5);
duoGroup.registerBgImage('content_start', 'http://www.hima.de/images/
rotation_startseite_links/01_safety_nonstop.gif');
duoGroup.registerBgImage('toolbox_pic', 'http://www.hima.de/images/
rotation_startseite_rechts/01_safety_nonstop_re.gif');
duoGroup.addTrigger('toolbox_pic', 'load');
duoGroup.name = 'group 2';
</script>

<style type="text/css">
<!--
#left {
background-image: url(http://www.hima.de/images/
01_safety_nonstop_2410.gif);
background-position: left top;
background-repeat: no-repeat;
float: left;
height: 196px;
width: 754px;
/*position: absolute;*/
}

#right {
background-image: url(http://www.hima.de/images/
01_safety_nonstop_re_2411.gif);
background-repeat: no-repeat;
height: 109px;
width: 215px;
margin: 0 0 0 754px;
/*position: absolute;*/
}
-->

</style>
</head>

<body>
<div id="left">
<div id="content_start"> </div>
</div>
<div id="right">
<div id="toolbox_pic"></div>
</div>

</body>
</html>
 
V

VK

....
duoGroup.addTrigger('toolbox_pic', 'load');
....

....
<div id="toolbox_pic"></div>
....

Since when DIV is having onload handler (load event) and respectively
how does it suppose to notify observer?
 
T

Thomas 'PointedEars' Lahn

wibni said:
I'm trying to get a working example of the Yahoo! Imageloader.
Click to expand...

Good luck, for whatever you think you would need that. You're going to need
it (the good luck).
I've done everything as explained here - http://developer.yahoo.com/yui/imageloader/
- but can not get it to work.
Click to expand...

The logical course of action would be to follow the link "Support &
Community". You don't ask the miller why the bread doesn't taste; you ask
the baker instead. That said, this bread is sour and has too much hot air
in it; make your own instead (of course, you would need to learn baking first).

The aim is to have 2 separate images loading together at the same
time.
Click to expand...

<img src="foo.jpg" alt="Foo" name="foo">
What it does though is just showing me my background images as defined
in the CSS code.
Click to expand...

Apparently you should learn baking.
I need it to overwrite these settings with the images defined in the
javascript code.
Click to expand...

Here's the recipe:

document.images["foo"].src = ...;
document.images["bar"].src = ...;
Posted the same question here: http://www.tek-tips.com/viewthread.cfm?qid=1553312&page=1
Click to expand...

They are right.

[...]
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/
build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/
build/imageloader/imageloader-min.js"></script>
Click to expand...

Why don't you ask someone insteqad who is clueless enough to think that
using YUI and minification would be a good idea?
<script>
Click to expand...

The #REQUIRED type attribute is missing.
var duoGroup = new YAHOO.util.ImageLoader.group('content_start',
'load', 5);
duoGroup.registerBgImage('content_start', 'http://www.hima.de/images/
rotation_startseite_links/01_safety_nonstop.gif');
duoGroup.registerBgImage('toolbox_pic', 'http://www.hima.de/images/
rotation_startseite_rechts/01_safety_nonstop_re.gif');
duoGroup.addTrigger('toolbox_pic', 'load');
duoGroup.name = 'group 2';
Click to expand...

That is syntactically correct.
</script>

<style type="text/css">
<!--
#left {
background-image: url(http://www.hima.de/images/
01_safety_nonstop_2410.gif);
background-position: left top;
background-repeat: no-repeat;
Click to expand...

You can combine that using the `background' property. You SHOULD NOT
include domain names in the URI-reference.
float: left;
height: 196px;
width: 754px;
/*position: absolute;*/
}

#right {
background-image: url(http://www.hima.de/images/
01_safety_nonstop_re_2411.gif);
background-repeat: no-repeat;
Click to expand...

Same here.
[...]
Click to expand...


HTH

PointedEars
 
W

wibni

Hi,

The code I've posted is an EXAMPLE code. I don't understand why people
pick on every little detail if I'm asking a completely different
question? (That's a rhetorical question!)

Have a look on the source code of this page. http://www.hima.com
It has a WORKING example!

You might notice that the 2 pictures in the header are being displayed
at exactly the same time,no matter what the speed of your internet
connection is. That's because it shows the background image in the
first 10 seconds on the page. After that it overwrites the background
with the images from the javascript code.
The idea is that both gif's are in sync when changing even though they
are of different size.
 
V

VK

Have a look on the source code of this page.http://www.hima.com
It has a WORKING example!
Click to expand...

Working in what way? The functionality you are describing below has
nothing to do with the intended Imageloader widget functionality.
You might notice that the 2 pictures in the header are being displayed
at exactly the same time,no matter what the speed of your internet
connection is. That's because it shows the background image in the
first 10 seconds on the page. After that it overwrites the background
with the images from the javascript code.
The idea is that both gif's are in sync when changing even though they
are of different size.
Click to expand...

Again: there is no onload handler for DIV's, so assignments like
duoGroup.addTrigger('toolbox_pic', 'load');
are mute both in your sample and on the page you are referring to. You
may look at DIV docs from Microsoft which is by far the richest by
event handlers as having a bunch of proprietary ones, but even here it
hasn't and never had onload:
http://msdn.microsoft.com/en-us/library/ms535240(VS.85).aspx
and YDN documentation is pretty clear on that addTrigger operates with
real event handlers defined for DIV or other chosen container, not
with some fantasy made handlers:
http://developer.yahoo.com/yui/imageloader/#triggers

So what is going on here is that the script doesn't work in neither
case (because never triggered), but image caching is still working and
it must be some "fool protection" built in so after some timeout
images still getting displayed - and in your case something is missing
to trig the fool protection, maybe because the page has no scroll.
Something like this, for the exact explanation it is needed to study
Imageloader internal code.
You may join http://tech.groups.yahoo.com/group/ydn-javascript/ and
ask there as well.
 
T

Thomas 'PointedEars' Lahn

wibni said:
The code I've posted is an EXAMPLE code. I don't understand why people
pick on every little detail if I'm asking a completely different
question? (That's a rhetorical question!)
Click to expand...

Why do people expect solutions to problems be served on a plate for free?
(That's a rhetorical question.)

Invalid examples are useless.
Have a look on the source code of this page. http://www.hima.com
It has a WORKING example!
Click to expand...

Working where?

,-<http://validator.w3.org/check?uri=http://www.hima.com/>
|
| 28 Errors, 35 warning(s)
You might notice that the 2 pictures in the header are being displayed
at exactly the same time,no matter what the speed of your internet
connection is. That's because it shows the background image in the
first 10 seconds on the page. After that it overwrites the background
with the images from the javascript code.
The idea is that both gif's are in sync when changing even though they
are of different size.
Click to expand...

You still don't need YUI or minification for any of that.


PointedEars
 
W

wibni

Hi VK,

I can get it to work by changing the following:

Changed
duoGroup.registerBgImage to duoGroup.registerSrcImage
and
<div id="content_start"></div> to <img id="content_start">

My code then works exactly the way I want, BUT internet explorer now
shows me a placeholder for the images in javascript during the first 5
seconds after loading the page.
This makes sense to me cause there is no image defined before the
javascript timer has run out.
Is there a way to hide this placeholder?
 
H

Holger Suhr

wibni said:
Hi VK,

I can get it to work by changing the following:

Changed
duoGroup.registerBgImage to duoGroup.registerSrcImage
and
<div id="content_start"></div> to <img id="content_start">
Click to expand...

You use the same id twice...
I think you can/must _replace_ the div tag with an img tag

My code then works exactly the way I want, BUT internet explorer now
shows me a placeholder for the images in javascript during the first 5
seconds after loading the page.
This makes sense to me cause there is no image defined before the
javascript timer has run out.
Is there a way to hide this placeholder?
Click to expand...

yes, put a src='my_placeholder.gif' in the img tag.

Holger
 
W

wibni

Hi Holger,

thanks for your reply!

And the solution is:
Add this code in CSS and it will work.

#content_start{
height: 196px;
}
#toolbox_pic{
height: 109px;
}

The animation was showing,but the DIV wasn't.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I am trying to detect Which image id="" was clicked ? 22
Why is the e.target not working here? 1
Need help , Having problem with Drag n Drop ? 9
Please Help? 0
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How can I get my menu inside of a menu to function properly? 1
Survey details won't go through using php, ajax, Mysql 0
How to have two html audio players on one page? 0

Members online

No members online now.
Total: 36 (members: 0, guests: 36)
Robots: 388

Forum statistics

Threads
473,770
Messages
2,569,584
Members
45,077
Latest member
SangMoor21

Latest Threads

Top