RE: Finding out load of background image
Charles Wiltgen <[email protected]> Sun, 15 Apr 2007 11:13:00 -0700 (PDT)
| Newsgroups | gmane.comp.web.dom.wdf |
|---|---|
| Message-ID | <[email protected]> |
--D7IdNFgsQGcDlx06ho5VUJRUyocCLOEovQ3a4y1
Content-Type: text/plain; charset=US-ASCII
Content-Transfer-Encoding: 7bit
With a library like YUI, you can simply use onAvailable andonContentReady.
If you’re anti-library, you can examine their code to see how they’redoing in reliably across various browsers.
— Charles
From: [email protected][mailto:[email protected]] On Behalf Of Marcus Bristav
Sent: Friday, April 13, 2007 10:59 PM
To: [email protected]
Subject: [wdf-dom] Finding out load of background image
We're doing an application running on potentially slow devices.
Sometimes we need to show plates with text on top of it. The plates
usually have a image background specified by css. A problem we have when
running on Opera is that when we show one of these plates is that the
load, unpacking and rendering of the background image takes longer time
than calculating and showing the DOM that is on top of the image => ugly
since text is drawn before the background. This is no problem when the
image is cached. We have tried to pre-load. The problem is that it's a
big application, and not that much memory, so images sometimes are
kicked out of the cache anyway.
We have also tried to render the image with explicit <img> and have a
listener on the onload event. The problem here is that the onload seems
to kick in when the image is loaded from the server rather than when
it's unpacked and rendered.
Anyone have any good ideas how to solve this in an elegant way without
using timeouts? Whether the solution uses css background images or <img>
tags doesn't matter.
We've been working on this on and off for almost half a year now so
anything that might help will make you a hero ;)
/Marcus
---------------------------------
Ahhh...imagining that irresistible "new car" smell?
Check outnew cars at Yahoo! Autos.
[Non-text portions of this message have been removed]
--D7IdNFgsQGcDlx06ho5VUJRUyocCLOEovQ3a4y1
Content-Type: text/html; charset=US-ASCII
Content-Transfer-Encoding: 7bit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<!-- Network content -->
<body style="background-color: #ffffff;">
<!--~-|**|PrettyHtmlStartT|**|-~-->
<div id="ygrp-mlmsg" style="width:655px; position:relative;">
<div id="ygrp-msg" style="width: 490px; padding: 0 15px 0 0; float:left; z-index:1;">
<!--~-|**|PrettyHtmlEndT|**|-~-->
<div id="ygrp-text">
<p> <br>
With a library like YUI, you can simply use onAvailable andonContentReady.<br>
<br>
If you&#8217;re anti-library, you can examine their code to see how they&#8217;redoing in reliably across various browsers.<br>
<br>
&#8212; Charles<br>
<br>
From: <a href="mailto:wdf-dom%40yahoogroups.com">wdf-dom@yahoogroups<wbr>.com</a>[mailto:<a href="mailto:wdf-dom%40yahoogroups.com">wdf-dom@yahoogroups<wbr>.com</a>] On Behalf Of Marcus Bristav<br>
Sent: Friday, April 13, 2007 10:59 PM<br>
To: <a href="mailto:wdf-dom%40yahoogroups.com">wdf-dom@yahoogroups<wbr>.com</a><br>
Subject: [wdf-dom] Finding out load of background image<br>
<br>
We're doing an application running on potentially slow devices.<br>
<br>
Sometimes we need to show plates with text on top of it. The plates <br>
usually have a image background specified by css. A problem we have when <br>
running on Opera is that when we show one of these plates is that the <br>
load, unpacking and rendering of the background image takes longer time <br>
than calculating and showing the DOM that is on top of the image => ugly <br>
since text is drawn before the background. This is no problem when the <br>
image is cached. We have tried to pre-load. The problem is that it's a <br>
big application, and not that much memory, so images sometimes are <br>
kicked out of the cache anyway.<br>
<br>
We have also tried to render the image with explicit <img> and have a <br>
listener on the onload event. The problem here is that the onload seems <br>
to kick in when the image is loaded from the server rather than when <br>
it's unpacked and rendered.<br>
<br>
Anyone have any good ideas how to solve this in an elegant way without <br>
using timeouts? Whether the solution uses css background images or <img> <br>
tags doesn't matter.<br>
<br>
We've been working on this on and off for almost half a year now so <br>
anything that might help will make you a hero ;)<br>
<br>
/Marcus<br>
<br>
------------<wbr>---------<wbr>---------<wbr>---<br>
Ahhh...imagining that irresistible "new car" smell?<br>
Check outnew cars at Yahoo! Autos.<br>
<br>
[Non-text portions of this message have been removed]<br>
<br>
</p>
</div>
<!--~-|**|PrettyHtmlStart|**|-~-->
<span width="1" style="color: white;">__._,_.___</span>
<!-- Start the section with Message In topic -->
<div id="ygrp-actbar">
<span class="left">
<a href="http://groups.yahoo.com/group/wdf-dom/message/5594;_ylc=X3oDMTM0OXYxc3JlBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBG1zZ0lkAzU1OTUEc2VjA2Z0cgRzbGsDdnRwYwRzdGltZQMxMTc2NjYwODQzBHRwY0lkAzU1OTQ-">
Messages in this topic </a> (<span class="bld">0</span>)
</span>
<a href="http://groups.yahoo.com/group/wdf-dom/post;_ylc=X3oDMTJwNHNyYXU1BF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBG1zZ0lkAzU1OTUEc2VjA2Z0cgRzbGsDcnBseQRzdGltZQMxMTc2NjYwODQz?act=reply&messageNum=5595">
<span class="bld">
Reply </span> (via web post)
</a> |
<a href="http://groups.yahoo.com/group/wdf-dom/post;_ylc=X3oDMTJlb2t2ZXI2BF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA250cGMEc3RpbWUDMTE3NjY2MDg0Mw--" class="bld">
Start a new topic </a>
</div>
<!------- Start Nav Bar ------>
<!-- |**|begin egp html banner|**| -->
<div id="ygrp-vitnav">
<a href="http://groups.yahoo.com/group/wdf-dom/messages;_ylc=X3oDMTJlaHZsb211BF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA21zZ3MEc3RpbWUDMTE3NjY2MDg0Mw--">Messages</a>
</div>
<!-- |**|end egp html banner|**| -->
<!-- Do not have place to put it yet -->
<div id="ygrp-grft">
</div>
<!-- yahoo logo -->
<!-- |**|begin egp html banner|**| -->
<div id="ygrp-ft">
<a href="http://groups.yahoo.com/;_ylc=X3oDMTJkOWE2NzlvBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA2dmcARzdGltZQMxMTc2NjYwODQz">
<img src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/logo/ma_grp_160.gif" height="15" width="106" border="0" alt="Yahoo! Groups"></a> <br>
<a href="http://groups.yahoo.com/group/wdf-dom/join;_ylc=X3oDMTJmNHYzazVtBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA3N0bmdzBHN0aW1lAzExNzY2NjA4NDM-">Change settings via the Web</a> (Yahoo! ID required) <br>
Change settings via email: <a href="mailto:[email protected]?subject=Email Delivery: Digest">Switch delivery to Daily Digest</a> | <a href = "mailto:[email protected]?subject=Change Delivery Format: Traditional">Switch format to Traditional</a> <br>
<a href="http://groups.yahoo.com/group/wdf-dom;_ylc=X3oDMTJkZ2ZudWhtBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA2hwZgRzdGltZQMxMTc2NjYwODQz">
Visit Your Group
</a> |
<a href="http://docs.yahoo.com/info/terms/">
Yahoo! Groups Terms of Use </a> |
<a href="mailto:[email protected]?subject=">
Unsubscribe </a>
</div> <!-- |**|end egp html banner|**| -->
</div> <!-- ygrp-msg -->
<!-- Sponsor -->
<!-- |**|begin egp html banner|**| -->
<div id="ygrp-sponsor" style="width:140px;float: left; clear: none; margin-left: 5px; background:white; margin-bottom:25px ;position:absolute; top:0; right: 0;">
<!-- Network content -->
<!-- Start vitality -->
<div id="ygrp-vital">
<div id="vithd">Recent Activity</div>
<ul style="list-style-type:none; padding: 0; margin: 2px 0;">
<li style="clear: both;">
<div class="ct" style="float: right;"><span style="display:none"> </span>9</div>
<div class="cat"><a href="http://groups.yahoo.com/group/wdf-dom/members;_ylc=X3oDMTJmcmk5aDhqBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwN2dGwEc2xrA3ZtYnJzBHN0aW1lAzExNzY2NjA4NDM-">New Members</a></div>
</li>
</ul>
<a href="http://groups.yahoo.com/group/wdf-dom;_ylc=X3oDMTJlYWNuNDloBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTE3NjY2MDg0Mw--">
Visit Your Group </a>
</div>
<!-- Network content -->
<div id="nc">
<div class="ad">
<div id="hd1">Yahoo! Photos</div>
<p><a href="http://us.ard.yahoo.com/SIG=12i5eifb0/M=493064.9803230.10510224.8674578/D=groups/S=1705016061:NC/Y=YAHOO/EXP=1176668043/A=3848630/R=0/SIG=10p8tommg/*http://photos.yahoo.com">Upload & Order</a></p>
<p>Same-day pickup</p>
<p>at Target</p> </div>
<div class="ad">
<div id="hd1">Y! GeoCities</div>
<p><a href="http://us.ard.yahoo.com/SIG=12ict1v1j/M=493064.9803219.10510212.8674578/D=groups/S=1705016061:NC/Y=YAHOO/EXP=1176668043/A=3848531/R=0/SIG=11vts2tqq/*http://us.rd.yahoo.com/evt=42416/*http://geocities.yahoo.com/">Create a Web Site</a></p>
<p>Easy-to-use tools.</p>
<p>Get started now.</p> </div>
<div class="ad">
<div id="hd1">Yahoo! Groups</div>
<p><a href="http://groups.yahoo.com/start;_ylc=X3oDMTJvaHE0NWNyBF9TAzk3MzU5NzE0BF9wAzMEZ3JwSWQDMjU2NDU2MwRncnBzcElkAzE3MDUwMTYwNjEEc2VjA25jbW9kBHNsawNncm91cHMyBHN0aW1lAzExNzY2NjA4NDM-">Start a group</a></p>
<p>in 3 easy steps.</p>
<p>Connect with others.</p>
</div>
</div>
</div> <!-- |**|end egp html banner|**| -->
<div style="clear:both; color: #FFF; font-size:1px;">.</div>
</div> <img src="http://geo.yahoo.com/serv?s=97359714/grpId=2564563/grpspId=1705016061/msgId=5595/stime=1176660843/nc1=3848630/nc2=3848531/nc3=3" width="1" height="1"> <br>
<span style="color: white;">__,_._,___</span>
<!--~-|**|PrettyHtmlEnd|**|-~-->
</body>
<!--~-|**|PrettyHtmlStart|**|-~-->
<head>
<style type="text/css">
<!--
#ygrp-mlmsg {font-size:13px; font-family: arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
#ygrp-mlmsg table {font-size:inherit;font:100%;}
#ygrp-mlmsg select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
#ygrp-mlmsg pre, code {font:115% monospace;*font-size:100%;}
#ygrp-mlmsg * {line-height:1.22em;}
#ygrp-text{
font-family: Georgia;
}
#ygrp-text p{
margin: 0 0 1em 0;
}
#ygrp-tpmsgs{
font-family: Arial;
clear: both;
}
#ygrp-vitnav{
padding-top: 10px;
font-family: Verdana;
font-size: 77%;
margin: 0;
}
#ygrp-vitnav a{
padding: 0 1px;
}
#ygrp-actbar{
clear: both;
margin: 25px 0;
white-space:nowrap;
color: #666;
text-align: right;
}
#ygrp-actbar .left{
float: left;
white-space:nowrap;
}
.bld{font-weight:bold;}
#ygrp-grft{
font-family: Verdana;
font-size: 77%;
padding: 15px 0;
}
#ygrp-ft{
font-family: verdana;
font-size: 77%;
border-top: 1px solid #666;
padding: 5px 0;
}
#ygrp-mlmsg #logo{
padding-bottom: 10px;
}
#ygrp-vital{
background-color: #e0ecee;
margin-bottom: 20px;
padding: 2px 0 8px 8px;
}
#ygrp-vital #vithd{
font-size: 77%;
font-family: Verdana;
font-weight: bold;
color: #333;
text-transform: uppercase;
}
#ygrp-vital ul{
padding: 0;
margin: 2px 0;
}
#ygrp-vital ul li{
list-style-type: none;
clear: both;
border: 1px solid #e0ecee;
}
#ygrp-vital ul li .ct{
font-weight: bold;
color: #ff7900;
float: right;
width: 2em;
text-align:right;
padding-right: .5em;
}
#ygrp-vital ul li .cat{
font-weight: bold;
}
#ygrp-vital a {
text-decoration: none;
}
#ygrp-vital a:hover{
text-decoration: underline;
}
#ygrp-sponsor #hd{
color: #999;
font-size: 77%;
}
#ygrp-sponsor #ov{
padding: 6px 13px;
background-color: #e0ecee;
margin-bottom: 20px;
}
#ygrp-sponsor #ov ul{
padding: 0 0 0 8px;
margin: 0;
}
#ygrp-sponsor #ov li{
list-style-type: square;
padding: 6px 0;
font-size: 77%;
}
#ygrp-sponsor #ov li a{
text-decoration: none;
font-size: 130%;
}
#ygrp-sponsor #nc {
background-color: #eee;
margin-bottom: 20px;
padding: 0 8px;
}
#ygrp-sponsor .ad{
padding: 8px 0;
}
#ygrp-sponsor .ad #hd1{
font-family: Arial;
font-weight: bold;
color: #628c2a;
font-size: 100%;
line-height: 122%;
}
#ygrp-sponsor .ad a{
text-decoration: none;
}
#ygrp-sponsor .ad a:hover{
text-decoration: underline;
}
#ygrp-sponsor .ad p{
margin: 0;
}
o {font-size: 0; }
.MsoNormal {
margin: 0 0 0 0;
}
#ygrp-text tt{
font-size: 120%;
}
blockquote{margin: 0 0 0 4px;}
.replbq {margin:4}
-->
</style>
</head>
<!--~-|**|PrettyHtmlEnd|**|-~-->
</html><!--End group email -->
--D7IdNFgsQGcDlx06ho5VUJRUyocCLOEovQ3a4y1--