Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #13504 > unrolled thread

Preloading PNGs & assigning as bkgd-image

Back to article view | Back to comp.lang.javascript

Contents

  Preloading PNGs & assigning as bkgd-image Puzzled <scratching.head@example.com> - 2012-04-21 14:20 -0400
    Re: Preloading PNGs & assigning as bkgd-image Stefan Weiss <krewecherl@gmail.com> - 2012-04-21 20:50 +0200
      Re: Preloading PNGs & assigning as bkgd-image Puzzled <scratching.head@example.com> - 2012-04-22 06:12 -0400
        Re: Preloading PNGs & assigning as bkgd-image Stefan Weiss <krewecherl@gmail.com> - 2012-04-22 20:18 +0200
    Re: Preloading PNGs & assigning as bkgd-image "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-04-21 18:56 +0000
      Re: Preloading PNGs & assigning as bkgd-image Puzzled <scratching.head@example.com> - 2012-04-22 07:07 -0400
        Re: Preloading PNGs & assigning as bkgd-image "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-04-23 10:22 +0000
          Re: Preloading PNGs & assigning as bkgd-image Stefan Weiss <krewecherl@gmail.com> - 2012-04-23 20:46 +0200
          Re: Preloading PNGs & assigning as bkgd-image Puzzled <scratching.head@example.com> - 2012-04-24 08:42 -0400
    Re: Preloading PNGs & assigning as bkgd-image SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-04-22 00:24 +0200

#13504 — Preloading PNGs & assigning as bkgd-image

I'm trying to do pre-loading of images to reduce later latency,
but am not getting anywhere despite everything I can find on the
web and in Goodman.  I'd very much appreciate some help! (Firefox
3.6.25 under XPProSP3).

Supposedly, this should create an image object in the document's
cache and load the bits into it:

var foo = new Image(70,25) ;  
foo.src = 'mumble/fratz.png' ;
foo.name = 'fratz' ;

but console.log('image count',document.images) returns the empty
array and ~.length) returns 0, suggesting that I didn't get the
syntax right after all.  Or that Image() isn't working, even
though Firebug doesn't complain .

To assign the image, if the preload were working, what syntax
would I use?

document.getElementById('some_td_id').style.background-image =
foo.src ;

or 

document.getElemnetById('some_td_id'_).style.background-image =
document.images.fratz ;

or something else? 

[toc] | [next] | [standalone]

#13511

On 2012-04-21 20:20, Puzzled wrote:
> Supposedly, this should create an image object in the document's
> cache and load the bits into it:
> 
> var foo = new Image(70,25) ;  
> foo.src = 'mumble/fratz.png' ;
> foo.name = 'fratz' ;
> 
> but console.log('image count',document.images) returns the empty
> array and ~.length) returns 0, suggesting that I didn't get the
> syntax right after all.  Or that Image() isn't working, even
> though Firebug doesn't complain .

Or that your assumption that new Image objects automatically land in
document.images is incorrect. If there are no other errors, the data
from fratz.png will eventually be stored in the foo object and
(hopefully) the browser cache. But since the image is never added to the
document, document.images will still be empty.

To be notified when an image has finished loading, you can use foo.onload.

> To assign the image, if the preload were working, what syntax
> would I use?
> 
> document.getElementById('some_td_id').style.background-image =
> foo.src ;

... style.backgroundImage = ...


- stefan

[toc] | [prev] | [next] | [standalone]

#13526

On Sat, 21 Apr 2012 20:50:46 +0200,
Stefan Weiss <krewecherl@gmail.com> wrote:

>On 2012-04-21 20:20, Puzzled wrote:
>> Supposedly, this should create an image object in the document's
>> cache and load the bits into it:
>> 
>> var foo = new Image(70,25) ;  
>> foo.src = 'mumble/fratz.png' ;
>> foo.name = 'fratz' ;
>> 
>> but console.log('image count',document.images) returns the empty
>> array and ~.length) returns 0, suggesting that I didn't get the
>> syntax right after all.  Or that Image() isn't working, even
>> though Firebug doesn't complain .
>
>Or that your assumption that new Image objects automatically land in
>document.images is incorrect. 

Yes, that was indeed my mistake.  Thank you.  

If the docs I found had said "browser disc cache" rather than
"browser cache", I might have had the penny drop.  

But I read "browser cache" as meaning only "within-browser
storage".  I saw that there's a document.images buffer that
supposedly holds images, and an Image() constructor that creates
images, and supposed that Image() created its product in the
buffer, with foo (in my example) being the handle for that image.
It's still seems untidy and counterintuitive that Image() doesn't
assign to the images buffer (which I have to suppose must be
populated only by the <img>  references in the html).  Oh well,
we live and if we're lucky, we learn.

Again thanks!

[toc] | [prev] | [next] | [standalone]

#13530

On 2012-04-22 12:12, Puzzled wrote:
> But I read "browser cache" as meaning only "within-browser
> storage".  I saw that there's a document.images buffer that
> supposedly holds images, and an Image() constructor that creates
> images, and supposed that Image() created its product in the
> buffer, with foo (in my example) being the handle for that image.
> It's still seems untidy and counterintuitive that Image() doesn't
> assign to the images buffer (which I have to suppose must be
> populated only by the <img>  references in the html).

Maybe it will seem less untidy when you consider that the document is
only one part of what JS can access. There are other things, like
variables or built-in objects, that have nothing to do with the
document. The 'foo' variable is one of those. document.images is not a
buffer, it's a live collection of image elements in the document.
Nothing keeps track of how many Image objects you have created, but the
'document' object can tell you how many image elements it currently
contains. Same thing goes for document.forms, document.anchors,
document.scripts, etc.

For example: you can create a new 'form' element, which you can then
manipulate with your script, but only after you add it to the document
will it show up in document.forms:

  console.log(document.forms.length);  // 0
  var f = document.createElement("form");
  console.log(document.forms.length);  // 0
  document.body.appendChild(f);
  console.log(document.forms.length);  // 1

- stefan

[toc] | [prev] | [next] | [standalone]

#13512

Puzzled wrote on 21 apr 2012 in comp.lang.javascript:

> I'm trying to do pre-loading of images to reduce later latency,
> but am not getting anywhere despite everything I can find on the
> web and in Goodman.  I'd very much appreciate some help! (Firefox
> 3.6.25 under XPProSP3).
> 
> Supposedly, this should create an image object in the document's
> cache and load the bits into it:
> 
> var foo = new Image(70,25) ;  
> foo.src = 'mumble/fratz.png' ;
> foo.name = 'fratz' ;
> 
> but console.log('image count',document.images) returns the empty
> array and ~.length) returns 0, suggesting that I didn't get the
> syntax right after all.  Or that Image() isn't working, even
> though Firebug doesn't complain .
> 
> To assign the image, if the preload were working, what syntax
> would I use?
> 
> document.getElementById('some_td_id').style.background-image =
> foo.src ;

Do you want to substract mathematically 
the value of image from the value of ...style.background?

Try:

document.getElementById('some_td_id').style.backgroundImage =

Reading the docs of css use in javascript has it's merits:
<http://www.w3schools.com/cssref/pr_background-image.asp>
 
> document.getElemnetById('some_td_id'_).style.background-image =
> document.images.fratz ;

no not this one.
 
> or something else? 

<img src='mumble/fratz.png' style='width:1px;visibility:hidden;'>

document.getElementById('some_td_id').style.background-image =
'url(mumble/fratz.png)';

If you use an image twice on a page it is loaded only once, methinks.


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#13527

On 21 Apr 2012 18:56:34 GMT,
"Evertjan." <exjxw.hannivoort@interxnl.net> wrote:

>Puzzled wrote on 21 apr 2012 in comp.lang.javascript:
>
>> I'm trying to do pre-loading of images to reduce later latency,
>> but am not getting anywhere despite everything I can find on the
>> web and in Goodman.  I'd very much appreciate some help! (Firefox
>> 3.6.25 under XPProSP3).
>> 
>> Supposedly, this should create an image object in the document's
>> cache and load the bits into it:
>> 
>> var foo = new Image(70,25) ;  
>> foo.src = 'mumble/fratz.png' ;
>> foo.name = 'fratz' ;
>> 
>> but console.log('image count',document.images) returns the empty
>> array and ~.length) returns 0, suggesting that I didn't get the
>> syntax right after all.  Or that Image() isn't working, even
>> though Firebug doesn't complain .
>> 
>> To assign the image, if the preload were working, what syntax
>> would I use?
>> 
>> document.getElementById('some_td_id').style.background-image =
>> foo.src ;
>
>Do you want to substract mathematically 
>the value of image from the value of ...style.background?

No, I want to impose the value of image on the background.

>
>Try:
>
>document.getElementById('some_td_id').style.backgroundImage =

Why wouldn't that be a syntax error? 

>
>Reading the docs of css use in javascript has it's merits:
><http://www.w3schools.com/cssref/pr_background-image.asp>

Believe it or not, I did.  Everything I could find. Exhaustively.
But, as I explained to Stefan, I got caught by terminology
differences.  The people who wrote those pages used terms that,
to me, are general rather than specific, and they didn't include
enough context to compensate.  They probably have never taught or
written for their living and so aren't really aware of how easily
misunderstandings of that kind can occur.

Had they said, about Image(), something like 

"var foo = new Image(100,200) ; creates an empty image object in
your program's heap.  foo.src = "distantsite//mumble/fratz.png"
causes the browser to fetch fratz.png from distantsite and store
it locally in the browser's cache without displaying it.

Afterwards, displaying the image will be very fast because it's
coming from the local disc rather than the remote server."

the amount of context would have told me everything I needed to
know.


>If you use an image twice on a page it is loaded only once, methinks.

I would hope that's true.

[toc] | [prev] | [next] | [standalone]

#13538

Puzzled wrote on 22 apr 2012 in comp.lang.javascript:

>>> document.getElementById('some_td_id').style.background-image =
>>> foo.src ;
>>
>>Do you want to substract mathematically 
>>the value of image from the value of ...style.background?
> 
> No, I want to impose the value of image on the background.

Indeed, so with this choice of yours you are indisposed.

I shall explain again:

javascript:

....style.background-image

is incorrect because the '-' is the javascript substraction operator.

In javascript the '-' is to be converted to the capirtaisation of the next 
character:

....style.backgroundImage

>>Try:
>>
>>document.getElementById('some_td_id').style.backgroundImage =
> 
> Why wouldn't that be a syntax error? 

Why wouldn't 1+1=2 be correct?

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#13549

On 2012-04-23 12:22, Evertjan. wrote:
> Puzzled wrote on 22 apr 2012 in comp.lang.javascript:
>> Why wouldn't that be a syntax error? 
> 
> Why wouldn't 1+1=2 be correct?

Because it will trigger an error (since you cannot assign to 1 ;)


- stefan


PS, here's that closing parenthesis you were looking for: )

PPS, and here's one for the jQuery thread, to give you some, uh, closure: )

[toc] | [prev] | [next] | [standalone]

#13558

On 23 Apr 2012 10:22:04 GMT,
"Evertjan." <exjxw.hannivoort@interxnl.net> wrote:

>Puzzled wrote on 22 apr 2012 in comp.lang.javascript:
>
>>>> document.getElementById('some_td_id').style.background-image =
>>>> foo.src ;
>>>
>>>Do you want to substract mathematically 
>>>the value of image from the value of ...style.background?
>> 
>> No, I want to impose the value of image on the background.
>
>Indeed, so with this choice of yours you are indisposed.
>
>I shall explain again:
>
>javascript:
>
>....style.background-image
>
>is incorrect because the '-' is the javascript substraction operator.

Eeek!  Misunderstandings galore. Now I see what you're saying.  

I *think* that I had the syntax correct in the actual code, and
just retyped it incorrectly here (and a sarcastic vote of
"thanks" to the CSS working group for their many Bad Choices
including using hyphenation in tokens).  Certainly I have it
correct now, though it's still not working and I still don't know
why.

>
>In javascript the '-' is to be converted to the capirtaisation of the next 
>character:
>
>....style.backgroundImage
>
>>>Try:
>>>
>>>document.getElementById('some_td_id').style.backgroundImage =
>> 
>> Why wouldn't that be a syntax error? 
>
>Why wouldn't 1+1=2 be correct?

Sorry, I thought you were suggesting that to remove the image
from the background I should terminate the statement at the =
sign.  (Though 1+1=2 would be incorrect in most computer
languages because assigning to a literal isn't allowed, but
that's just me trying to be funny - I know what you meant)

[toc] | [prev] | [next] | [standalone]

#13514

Le 21/04/12 20:20, Puzzled a écrit :
> I'm trying to do pre-loading of images to reduce later latency,

post-loading, no ?

> but am not getting anywhere despite everything I can find on the
> web and in Goodman.  I'd very much appreciate some help! (Firefox
> 3.6.25 under XPProSP3).
>
> Supposedly, this should create an image object in the document's
> cache and load the bits into it:

var U = ['img_1.png','numble/fratz.png','photos/01.png'],
     n = U.length,
     c = 0,
     I = [];

function postLoad() {
if(c<n) {
	I[c] = new Image();
	I[c].onload = postLoad;
	I[c].src = U[c];
	c++;
	}
else
document.getElementById('some_td_id').style.backgroundImage = 
'url('+I[1].src+')';
}
onload = postLoad;


-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web