Coldfusion cfthread를 사용하여 이미지를 lazyload 할 수 있습니까?

Question

나는 coldfusion8/MySQL5.0.88을 실행 중입니다. 제품을 검색하기 전에 다양한 외부 소스에서 이미지를 가져 와서 크기를 조정해야합니다.

제품을 만들 때 (검색 할 때) 대부분이 작업을 수행 할 수 있지만 모든 이미지가 내 서버에서 크기가 조정 된 형식으로 제공 될 수는 없으므로 제품 검색에 대체가 필요합니다. 지금

, 나는 이미지가 서버에서 사용할 수 있는지 여부를 확인하고있어하지 않을 경우, 정말 같은 이미지를 잡아 크기를 조정 루틴을 발사 :

이

// check if image is available 
<cfif results.typ NEQ "img" AND results.typ NEQ "alt"> 
    <cfif results.bildpfad neq "" AND results.bilddateiname neq ""> 
    <cfset imgSuccess = form_img_handler.upload 
     (command = "upload_search" 
     , imgPath = results.bildpfad 
     , imgFile = results.bilddateiname 
     , sellerILN = results.iln 
     , cookie = variables.screenWidth 
     )/> 
    <cfif imgSuccess EQ "false"> 
     <cfset variables.imgFail = "true"> 
    </cfif> 
</cfelse> 
    <cfset variables.imgFail = "true"> 
</cfif> 

// missing img 
<cfif variables.imgFail EQ "true"> 
    <cfoutput><div class="resultsImgWrap noImgFound"></div></cfoutput> 
    <cfset variables.imgFail = "false"> 
<cfelse> 
// show image 
    <cfoutput><div class="resultsImgWrap"><img src="#variables.imageSrc#" /></div></cfoutput> 
</cfif> 

upload 기능은 cfhttp 요청을 처리하고 크기 조정 후 true/false을 반환합니다.

이 컨텍스트에서 cfthread을 사용할 수 있는지 궁금합니다. 따라서 사용자가 검색을 수행 할 때 정확한 URL 링크를 포함하는 마크 업을 출력하지만 이미지의 끌어 오기/크기 조정/대상에 저장이 완료됩니다. a cfthread, 사용자에 대한 결과 표시 속도를 높이기 위해.

질문 :
이미지가 cfthread 한 번 표시 것인가가 처리를 완료하거나이 방법은 (아마도)가 생성되지 않은 이미지를로드하려고 404 오류가 발생합니다? 이미지를 업로드하고 처리하는 동안 사용자에게 무언가를 보여주고 사용자가 계속할 수있게하는 다른 방법이 있습니까?

감사합니다.

편집 :
확인. 답변을 바탕으로 다음과 같이 생각해 냈습니다. 아직 일하지는 않지만 올바른 방향으로 가고 있다고 생각합니다.

// check media log, if image is logged (already created), if so, load it, if not pull it from external 
<cfif results.typ NEQ "img" AND results.typ NEQ "alt"> 
    // check path and filename 
    <cfif results.bildpfad neq "" AND results.bilddateiname neq ""> 
     // pull in 
     // arguments: 
     // cm = form 
     // pt = path to image 
     // fl = filename 
     // se = seller id 
     // ck = screen width (I'm using adaptive image sizes 
     // ax = origin 
     // gb = which image size to return 
     <cfset variables.imgSrc = expandPath("../services/img_handler.cfc") & "?method=up&cm=results&pt=" & results.bildpfad & "&fl=" & results.bilddateiname & "&se=" & results.id & "&ck=" & variables.screenWidth & "&ax=rm&gb=s"> 
    <cfelse> 
     cfset variables.imgFail = "true"> 
    </cfif> 
</cfif> 

<cfif variables.imgFail EQ "true"> 
    <cfoutput><div class="resultsImgWrap noImgFound"><img src="../images/not_found.png"></div></cfoutput> 
    <cfset variables.imgFail = "false"> 
<cfelse> 
    <cfoutput><div class="resultsImgWrap"><a class="swipeMe" rel="external" href="#variables.zoomSrc#"> 
       <img src="#variables.imageSrc#" class="adaptImg ui-li-thumb" /></a> 
       </div></cfoutput> 
</cfif> 

이렇게하면 결과와 함께 쿼리하는 미디어 로그의 이미지를 확인합니다 (기존 이미지에 대한 불필요한 s3 검사를 피하십시오). 이미지가 로그에없는 경우, I 경로/파일 이름을 확인하고있어 비어있는 다음과 같은 수행 내 intelligent 이미지 로더, 트리거하지 :

<cfcomponent output="false" hint="image handler"> 
    <cffunction name="Init" access="public" returntype="any" output="false" hint="Initialize"> 
     <cfreturn true /> 
    </cffunction>  

    <cffunction name="upload" access="remote" output="false" hint="creates images and stores them to S3"> 
     <cfargument name="cm" type="string" required="true" hint="" /> 
     <cfargument name="pt" type="string" required="true" hint="" /> 
     <cfargument name="fl" type="string" required="true" hint="" /> 
     <cfargument name="se" type="string" required="true" hint="" /> 
     <cfargument name="ck" type="string" required="true" hint="" /> 
     <cfargument name="gb" type="string" required="false" hint="" /> 
     <cfargument name="ax" type="string" required="false" hint="" /> 

     <cfscript> 
      var LOCAL = {}; 
      // arguments 
      LOCAL.command = cm; 
      LOCAL.imgPath = pt; 
      LOCAL.imgFile = fl; 
      LOCAL.sellerILN = se; 
      LOCAL.cookie = LSParseNumber(ck); 
      LOCAL.getBack = gb; 
      LOCAL.access = ax; 
      // s3 
      // commander 
      if (LOCAL.command NEQ "") { 
       LOCAL.action = LOCAL.command; 
      } else { 
       LOCAL.action = "upload"; 
       } 
      // s3 misc 
      LOCAL.bucketPath = Session.bucketPath; 
      LOCAL.bucketName = Session.bucketName; 
      LOCAL.acl = "public-read"; 
      LOCAL.storage = ""; 
      LOCAL.tempDirectory = expandPath("../members/img/secure/"); 
      LOCAL.allow = "png,jpg,jpeg"; 
      LOCAL.failedLoads = ""; 
      LOCAL.altFailedLoads = ""; 
      LOCAL.createBucket = "false"; 
      LOCAL.errorCount = 0; 
      LOCAL.altErrorCount = 0; 
      LOCAL.cacheControl = 1; 
      LOCAL.contentType = "image"; 
      LOCAL.httptimeout = "300"; 
      LOCAL.cacheDays = "30"; 
      LOCAL.storageClass = "REDUCED_REDUNDANCY"; 
      LOCAL.keyName = ""; 
      LOCAL.baseUrl = "http://www.baseurl.com"; 
      LOCAL.imageSrc = ""; 
      LOCAL.testFilePath = LOCAL.imgPath & LOCAL.imgFile; 
      LOCAL.fileExt = ListLast(LOCAL.testFilePath, "."); 
      LOCAL.runner = "s,m,l,xl"; 
      LOCAL.worked = "true"; 
     </cfscript> 
     // runner is the file size setter, in results I only create two sizes, during imports I create all four 
     <cftry> 
     <cfhttp timeout="45" 
      throwonerror="no" 
      url="#LOCAL.testFilePath#" 
      method="get" 
      useragent="Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12" 
      getasbinary="yes" 
      result="objGet"> 
     <cfscript> 
      // set file sizes to create 
      if (LOCAL.command EQ "upload_search"){ 
       if (LOCAL.cookie LT 320) { 
        LOCAL.runner = "l,s"; 
        } 
       else if (LOCAL.cookie GTE 320 AND LOCAL.cookie LTE 767) { 
        LOCAL.runner = "l,m"; 
        } 
       else if (LOCAL.cookie GT 768) { 
        LOCAL.runner = "xl,m"; 
        } 
       else if (LOCAL.cookie GT 1280){ 
        LOCAL.runner = "xl,l"; 
        } 
       } else if (LOCAL.command EQ "upload_import") { 
        LOCAL.runner = "xl,l,m,s"; 
        } 
      // validate 
      if (len(objGet.Filecontent) EQ 0 OR objGet.Mimetype EQ "text/html" ){ 
       LOCAL.worked = "false length or mime"; 
       } else if (NOT listfindnocase(LOCAL.allow, LOCAL.fileExt)){ 
       LOCAL.worked = "false wrong extension"; 
       } else { 
       // create temp 
       LOCAL.objImage = ImageNew(objGet.FileContent); 
       LOCAL.basePath = LOCAL.tempDirectory & "_base_" & LOCAL.imgFile; 
       imageWrite(LOCAL.objImage, LOCAL.basePath, ".99"); 
       LOCAL.base = imageRead(LOCAL.basePath); 
       LOCAL.imageSrc = LOCAL.tempDirectory; 

       // formats 
       // S = 100x127, 
       // M = 180x230, 
       // L = 290x370, 
       // XL = 870x1110 

       // portrait 
       if (ImageGetWidth(LOCAL.base) LT ImageGetHeight(LOCAL.base)){ 
        for (LOCAL.i = 1; LOCAL.i LTE ListLen(LOCAL.runner,","); LOCAL.i = LOCAL.i+1){ 
         LOCAL.lt = ListGetAt(LOCAL.runner, LOCAL.i, ","); 
         LOCAL.base = imageRead(LOCAL.basePath); 
         ImageSetAntialiasing(LOCAL.base,"on"); 
         // default image width/height 
         LOCAL.height = Application.strConfig.respH[LOCAL.lt]; 
         LOCAL.width = ""; 
         ImageScaleToFit(LOCAL.base, LOCAL.width, LOCAL.height, "highestQuality"); 

         LOCAL.filekey = LOCAL.lt & "_" & LOCAL.imgFile; 
         LOCAL.keyName = LOCAL.sellerILN & "/" & LOCAL.filekey; 
         LOCAL.filename = LOCAL.tempDirectory & LOCAL.filekey; 
         imageWrite(LOCAL.base, LOCAL.filename, ".99"); 

         // s3 
         Application.strObjs.s3.putObject(LOCAL.bucketName, LOCAL.filekey, LOCAL.contentType, LOCAL.httptimeout, LOCAL.cacheControl, LOCAL.cacheDays, LOCAL.acl, LOCAL.storageClass, LOCAL.keyName, LOCAL.imageSrc, "false"); 
         fileDelete(LOCAL.tempDirectory & LOCAL.lt & "_" & LOCAL.imgFile); 
         } 
        } else { 
        // same for landscape 
        ... 
        } 
       } 
       // cleanup 
       fileDelete(LOCAL.tempDirectory & "_base_" & LOCAL.imgFile); 
      } 
     </cfscript> 
    // update media log 
     ... 
     <cfcatch> 
     // dump errror message 
     </cfcatch> 
     </cftry> 

    // return image 
     <cfif LOCAL.access EQ "rm"> 
      <cftry> 
      <cfscript> 
      if (LOCAL.getBack EQ "s"){ 
       LOCAL.passPath = Session.bucketPath & Session.bucketName & "/" & LOCAL.sellerILN & "/" & ListGetAt(LOCAL.runner, Listlen(LOCAL.runner), ",") & "_" & LOCAL.imgFile; 
      } else if(LOCAL.getBack EQ "l") { 
       LOCAL.passPath = Session.bucketPath & Session.bucketName & "/" & LOCAL.sellerILN & "/" & ListGetAt(LOCAL.runner, 1, ",") & "_" & LOCAL.imgFile; 
      } 
      LOCAL.mime = "image/" & LOCAL.fileExt; 
      </cfscript> 

      <cfcontent type="#LOCAL.mime#" file="#LOCAL.passPath#" /> 
      <cfcatch> 
      // dump errors 
      </cfcatch>        
     </cftry> 
    <cfelse> 
     <cfreturn LOCAL.worked> 
    </cfif> 
    </cffunction> 
</cfcomponent> 

그래서 내가 만들려는 파일 크기 설정이야을 LOCAL.runner이 목록을 살펴보면 기본 이미지 크기를 기본 이미지 크기로 변경하고 생성 된 이미지를 s3에 저장합니다.

문제 : cfcontent 이미지를 만들기 전에 반환하려고합니다. 위 코드를 실행하면 The file specified in contentTag does not exist 오류가 발생합니다. S3에서 확인하면 이미지가 있지만, 타이밍 문제라고 가정합니다.

'cfcontent'이미지를 만들 때까지 기다려야 할 수있는 방법에 대한 모든 포인터 주셔서 감사합니다!

Answer 1

img를로드 할 로컬 CFM에 대한 링크 출력은 어떻게됩니까? 내 말은 서버에있는 이미지의 경우 가리키는 문자 <img>을 출력한다는 것입니다.

<img src="imagegetter.cfm?p=#urlofimagetoload#"> 

imagegetter.cfm 얻을 로컬 이미지 크기를 조정하기 위해 HTTP를 수행 할 책임이 될 것이다 : 이미지의이 같은 출력 할 것을,로드해야합니다. 그런 다음 cfcontent를 통해 비트를 제공 할 수 있습니다.