Link to home
Start Free TrialLog in
Avatar of McHack
McHack

asked on

Preloading dynamic images.

I know that this question primarily involves javascript but I'm putting it here because it also involves Coldfusion. The script below will size an image to a specific dimension when it is called from the image tag (<img src...) . I works fine even with dynamic images but the problem is that you see the large version of each image on screen before it gets resized. What I want to know is how can the dynamic images be preloaded so that they will not show until they get resized?

<!--- Add this script to the Head of the document --->

<script language="javascript">
<!--
//Make graphic fit in to specified space
function makeFit(theImg, maxW, maxH){
 var oldH, oldW, chngH, chngH
 oldH = theImg.height;
 oldW = theImg.width;
 chngW = oldW/maxW;
 chngH = oldH/maxH;
 if(chngW > chngH) {
 theImg.width = maxW;
 }
 else if(chngH > chngW){
 theImg.height = maxH;
 }
 else {
 theImg.width = maxW;
 }
}
//-->
</script>



<!--- Add this code to the Image SRC tag --->

<img src="#Image#" onLoad="makeFit(this, 136, 136)" align="center" border="0" alt="&copy; 2005">

onLoad="makeFit(this, 136, 136)"
Avatar of kyle1830
kyle1830
try this:

<script language="javascript">
<!--
//Make graphic fit in to specified space
function makeFit(theImg, maxW, maxH){
 var oldH, oldW, chngH, chngH
 oldH = theImg.height;
 oldW = theImg.width;
 chngW = oldW/maxW;
 chngH = oldH/maxH;
 if(chngW > chngH) {
 theImg.width = maxW;
 }
 else if(chngH > chngW){
 theImg.height = maxH;
 }
 else {
 theImg.width = maxW;
 }
 document.thisImage.style.display = '';
}


//-->
</script>



<!--- put the div around the image and set the display to hide it --->
<div id="thisImage" style="display:none">
<img src="#Image#" onLoad="makeFit(this, 136, 136)" align="center" border="0" alt="&copy; 2005">
</div>
Avatar of McHack
McHack

ASKER

kyle1830

I'm getting an error on the page. I'ts having a problem with the line in the javascript: document.thisImage.style.display = '';

The error says:  'document.thisImage.style' Is null or not an object.

Tried to find out why I'm getting the error but no luck.

McHack
Avatar of kyle1830
kyle1830
and you have the div tags around the img?
Avatar of kyle1830
kyle1830
realized missed some code
 document.getElementById('thisImage').style.display = '';

kyle
Avatar of McHack
McHack

ASKER

Kyle,

With that additional bit of code I'm no longer getting an error but only the first image displays all the other images never load, at least not on screen.
Avatar of kyle1830
kyle1830
i was just thinking one image, let me think for a few minutes on this
Avatar of kyle1830
kyle1830
are your images within a cfoutput from a query?

if so make these changes
<script>
function makeFit(theImg, maxW, maxH, thisName){
 var oldH, oldW, chngH, chngH
 oldH = theImg.height;
 oldW = theImg.width;
 chngW = oldW/maxW;
 chngH = oldH/maxH;
 if(chngW > chngH) {
 theImg.width = maxW;
 }
 else if(chngH > chngW){
 theImg.height = maxH;
 }
 else {
 theImg.width = maxW;
 }
 document.getElementById(thisName).style.display = '';
}

</script>

<div id="#queryname.currentrow#" style="display:none">
<img src="../images/add.gif" onLoad="makeFit(this, 136, 136, #queryname.currentrow#);" align="center" border="0" alt="&copy; 2005">
</div>


or if you are doing a loop, then just create a counter that names the div and item in the string.
Avatar of McHack
McHack

ASKER

Kyle,

Yes there is a loop that builds the table with the images. Here is the code on the page:

<cfset CurrentPage=GetFileFromPath(GetTemplatePath())>
<cfparam name="PageNum_photocontest" default="1">
<cfquery name="photocontest" datasource="#appds#">
SELECT * FROM photocontest WHERE Approve = 'YES' ORDER BY ID DESC
</cfquery>

<cfset MaxRows_photocontest=12>
<cfset StartRow_photocontest=Min((PageNum_photocontest-1)*MaxRows_photocontest+1,Max(photocontest.RecordCount,1))>
<cfset EndRow_photocontest=Min(StartRow_photocontest+MaxRows_photocontest-1,photocontest.RecordCount)>
<cfset TotalPages_photocontest=Ceiling(photocontest.RecordCount/MaxRows_photocontest)>

<!-- Auto Resize Window To Image Size -->
<script language="Javascript">
   function PopupPic(sPicURL) {
     window.open( "popup.htm?"+sPicURL, "",  
     "resizable=1,HEIGHT=200,WIDTH=200");
   }
   </script>

<link href="<cfoutput>#siteURL##appDir##siteCSS1#</cfoutput>" rel="stylesheet" type="text/css">

<script language="javascript">
<!--
//Make graphic fit in to specified space
function makeFit(theImg, maxW, maxH){
 var oldH, oldW, chngH, chngH
 oldH = theImg.height;
 oldW = theImg.width;
 chngW = oldW/maxW;
 chngH = oldH/maxH;
 if(chngW > chngH) {
 theImg.width = maxW;
 }
 else if(chngH > chngW){
 theImg.height = maxH;
 }
 else {
 theImg.width = maxW;
 }
 document.getElementById('thisImage').style.display = '';
}


//-->
</script>

      
 <link href="css/forms.css" rel="stylesheet" type="text/css">
 
 <table width="427" align="center" bgcolor="#523F76">
   <tr>
     <td align="center" class="headlineSM"><a href="rules.cfm" class="headlineSM">Complete
     Rules Here</a></td>
   </tr>
 </table>

<table width="431" border="0" align="center" cellpadding="0" cellspcing="0">
<!--- Set default value to use in our loop --->
<cfset EndRow=0>
<!--- Set the max number of record to display per row.  --->
<cfset ToDisplay=3>
<!--- Start loop and define the stop point --->
<cfloop condition="EndRow lt photocontest.RecordCount">
<!--- Set the conditions for our inner loop --->
<cfset StartRow=EndRow+1>
<cfset EndRow=EndRow+ToDisplay>
<cfif EndRow gt photocontest.RecordCount>
<cfset EndRow = photocontest.RecordCount>
</cfif>
<tr>
<cfloop query="photocontest" startrow="#StartRow#" endrow="#EndRow#">

<td valign="top"><cfoutput><form method="Post" name="photocontest" action="vote.cfm">
<table width="136" border="0" align="center" cellpadding="2" cellspacing="0" bgcolor="##CCCCCC">
  <tr height="110" valign="top">
    <td valign="top" align="center" bgcolor="##E1DCEC" width="136"><a name="#photocontest.ID#" class="navtext"></a><a href="javascript:PopupPic('#siteURL##appDir##PhotoSource##Image#')"><img src="#siteURL##appDir##PhotoSource##Image#" onLoad="makeFit(this, 136, 136)" align="center" border="0" alt="&copy; 2005 #FirstName# #LastName#"></div></a></td>
  </tr>
</table>
  <table width="140" border="0" bgcolor="##CCCCCC" align="center" cellpadding="2">
  <tr>
    <td align="center" valign="top" bgcolor="##523F76" class="bodytext2"><a href="form.cfm?Notes=#Notes#&Image=#Image#" class="bodytext2"><font color="##FFFFFF">Vote &nbsp;&nbsp;</font></a><font color="##FFFFFF">for your favorite</font> </td>
  </tr>
  <tr>
    <td align="center" bgcolor="##E1DCEC" class="bodytext2" valign="top">Test #FirstName# #LastName#<br>#City#, #State#</td>
  </tr>
  <tr>
    <td align="center" bgcolor="##E1DCEC" class="bodytext2" valign="top"><b>Vote: </b>&nbsp;&nbsp;<a href="form.cfm?Notes=#Notes#&Image=#Image#" class="narrowtext">#Notes#</a></td>
  </tr>
</table>
</form></cfoutput></td>

</cfloop>
</tr>
</cfloop>
</table>
Avatar of kyle1830
kyle1830
ok....made change and reposted code as it should be
<cfset CurrentPage=GetFileFromPath(GetTemplatePath())>
<cfparam name="PageNum_photocontest" default="1">
<cfquery name="photocontest" datasource="#appds#">
SELECT * FROM photocontest WHERE Approve = 'YES' ORDER BY ID DESC
</cfquery>

<cfset MaxRows_photocontest=12>
<cfset StartRow_photocontest=Min((PageNum_photocontest-1)*MaxRows_photocontest+1,Max(photocontest.RecordCount,1))>
<cfset EndRow_photocontest=Min(StartRow_photocontest+MaxRows_photocontest-1,photocontest.RecordCount)>
<cfset TotalPages_photocontest=Ceiling(photocontest.RecordCount/MaxRows_photocontest)>

<!-- Auto Resize Window To Image Size -->
<script language="Javascript">
   function PopupPic(sPicURL) {
     window.open( "popup.htm?"+sPicURL, "",  
     "resizable=1,HEIGHT=200,WIDTH=200");
   }
   </script>

<link href="<cfoutput>#siteURL##appDir##siteCSS1#</cfoutput>" rel="stylesheet" type="text/css">

<script language="javascript">
<!--
//Make graphic fit in to specified space
function makeFit(theImg, maxW, maxH, thisName){
 var oldH, oldW, chngH, chngH
 oldH = theImg.height;
 oldW = theImg.width;
 chngW = oldW/maxW;
 chngH = oldH/maxH;
 if(chngW > chngH) {
 theImg.width = maxW;
 }
 else if(chngH > chngW){
 theImg.height = maxH;
 }
 else {
 theImg.width = maxW;
 }
 document.getElementById(thisName).style.display = '';
}


//-->
</script>

     
 <link href="css/forms.css" rel="stylesheet" type="text/css">
 
 <table width="427" align="center" bgcolor="#523F76">
   <tr>
     <td align="center" class="headlineSM"><a href="rules.cfm" class="headlineSM">Complete
     Rules Here</a></td>
   </tr>
 </table>

<table width="431" border="0" align="center" cellpadding="0" cellspcing="0">
<!--- Set default value to use in our loop --->
<cfset EndRow=0>
<!--- Set the max number of record to display per row.  --->
<cfset ToDisplay=3>
<!--- Start loop and define the stop point --->
<cfloop condition="EndRow lt photocontest.RecordCount">
<!--- Set the conditions for our inner loop --->
<cfset StartRow=EndRow+1>
<cfset EndRow=EndRow+ToDisplay>
<cfif EndRow gt photocontest.RecordCount>
<cfset EndRow = photocontest.RecordCount>
</cfif>
<tr>
<cfloop query="photocontest" startrow="#StartRow#" endrow="#EndRow#">

<td valign="top"><cfoutput><form method="Post" name="photocontest" action="vote.cfm">
<table width="136" border="0" align="center" cellpadding="2" cellspacing="0" bgcolor="##CCCCCC">
  <tr height="110" valign="top">
    <td valign="top" align="center" bgcolor="##E1DCEC" width="136"><a name="#photocontest.ID#" class="navtext"></a><div id="#photocontest.currentrow#" style="display:none"> <a href="javascript:PopupPic('#siteURL##appDir##PhotoSource##Image#')"><img src="#siteURL##appDir##PhotoSource##Image#" onLoad="makeFit(this, 136, 136,#photocontest.currentrow#)" align="center" border="0" alt="&copy; 2005 #FirstName# #LastName#"></a></div></td>
  </tr>
</table>
  <table width="140" border="0" bgcolor="##CCCCCC" align="center" cellpadding="2">
  <tr>
    <td align="center" valign="top" bgcolor="##523F76" class="bodytext2"><a href="form.cfm?Notes=#Notes#&Image=#Image#" class="bodytext2"><font color="##FFFFFF">Vote &nbsp;&nbsp;</font></a><font color="##FFFFFF">for your favorite</font> </td>
  </tr>
  <tr>
    <td align="center" bgcolor="##E1DCEC" class="bodytext2" valign="top">Test #FirstName# #LastName#<br>#City#, #State#</td>
  </tr>
  <tr>
    <td align="center" bgcolor="##E1DCEC" class="bodytext2" valign="top"><b>Vote: </b>&nbsp;&nbsp;<a href="form.cfm?Notes=#Notes#&Image=#Image#" class="narrowtext">#Notes#</a></td>
  </tr>
</table>
</form></cfoutput></td>

</cfloop>
</tr>
</cfloop>
</table>
ASKER CERTIFIED SOLUTION
Avatar of kyle1830
kyle1830
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of McHack
McHack

ASKER

Kyle,

I tried them both and the first one worked and the second didn't. I only needed one to work so I'm all set. Thank you for the speedy solution.
Avatar of kyle1830
kyle1830
glad to help ..good luck