?
Solved

Preloading dynamic images.

Posted on 2005-03-08
12
Medium Priority
?
412 Views
Last Modified: 2013-12-24
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
Comment
Question by:McHack
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 4
12 Comments
 
LVL 8

Expert Comment

by:kyle1830
ID: 13487309
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
 

Author Comment

by:McHack
ID: 13488817
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
 
LVL 8

Expert Comment

by:kyle1830
ID: 13488885
and you have the div tags around the img?
0
What Is Blockchain Technology?

Blockchain is a technology that underpins the success of Bitcoin and other digital currencies, but it has uses far beyond finance. Learn how blockchain works and why it is proving disruptive to other areas of IT.

 
LVL 8

Expert Comment

by:kyle1830
ID: 13489067
realized missed some code
 document.getElementById('thisImage').style.display = '';

kyle
0
 

Author Comment

by:McHack
ID: 13489157
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
 
LVL 8

Expert Comment

by:kyle1830
ID: 13489250
i was just thinking one image, let me think for a few minutes on this
0
 
LVL 8

Expert Comment

by:kyle1830
ID: 13489320
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
 

Author Comment

by:McHack
ID: 13489458
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
 
LVL 8

Expert Comment

by:kyle1830
ID: 13489972
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
 
LVL 8

Accepted Solution

by:
kyle1830 earned 2000 total points
ID: 13490018
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
 

Author Comment

by:McHack
ID: 13490233
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
 
LVL 8

Expert Comment

by:kyle1830
ID: 13490256
glad to help ..good luck
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a guide to setting up a new WHM/cPanel Server to be used for web hosting accounts. It is intended for web hosting company administrators and dedicated server owners. For under $99 per month (considering normal rate of Big Data Cetnters like …
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…
In this video, Percona Solution Engineer Dimitri Vanoverbeke discusses why you want to use at least three nodes in a database cluster. To discuss how Percona Consulting can help with your design and architecture needs for your database and infras…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question