Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 413
  • Last Modified:

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)"
0
McHack
Asked:
McHack
  • 8
  • 4
1 Solution
 
kyle1830Commented:
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>
0
 
McHackAuthor Commented:
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
0
 
kyle1830Commented:
and you have the div tags around the img?
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
kyle1830Commented:
realized missed some code
 document.getElementById('thisImage').style.display = '';

kyle
0
 
McHackAuthor Commented:
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.
0
 
kyle1830Commented:
i was just thinking one image, let me think for a few minutes on this
0
 
kyle1830Commented:
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.
0
 
McHackAuthor Commented:
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>
0
 
kyle1830Commented:
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>
0
 
kyle1830Commented:
if not, then do it this way:  (same thing but using a counter in the loop)


<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>
<cfset thisCount = 1>
<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="#thisCount#" style="display:none"> <a href="javascript:PopupPic('#siteURL##appDir##PhotoSource##Image#')"><img src="#siteURL##appDir##PhotoSource##Image#" onLoad="makeFit(this, 136, 136,#thisCount#)" 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>
<cfset thisCount = thisCount + 1>
</cfloop>
</table>
0
 
McHackAuthor Commented:
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.
0
 
kyle1830Commented:
glad to help ..good luck
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now