Question

갤러리 유형 응용 프로그램에서 작업 중 - 하나의 템플릿이 클릭하면 축소판 이미지를 더 크게 볼 수있는 팝업 대화 상자가 나타납니다. 이미지에 대한 서버 경로가 템플리트 변수로 포함됩니다.

Gallery.Templates.Popup = "\ 
    <div class='popup'>\ 
     <img class='popup-image' src='{{image-path}}' />\ 
     <div class='name'>{{name}}</div>\ 
     <div class='caption'>{{caption}}</div>\ 
     <div class='dimensions'>{{dimensions}}</div>\ 
     <div class='price'>{{price}}</div>\ 
    </div> \ 
"; 

이미지가 처음로드 될 때를 제외하고는 아주 잘 작동합니다. 대화 상자가 생성되어 표시되지만 html 문자열이 dom에 연결될 때 이미지가 없습니다. 대화 상자가이 같은 화면의 중앙에 위치

:이 일으키는 문제는 대화를 위치에 왼쪽 = window.width/2 - dialog.width/2

그러나 이후 이미지가 없으면 dialog.width 변수가 올바르지 않습니다. 다시 말하지만 썸네일을 처음 클릭 할 때만 발생하며 이후 클릭에 대해 이미지가 캐시 된 것 같습니다.

어떻게 든 이미지를 프리 페치하여 처리 할 수 ​​있습니까? 그렇다면 캐시에 저장하기 위해 dom에 연결해야합니까, 아니면 그냥 배열로로드 할 수 있습니까?

많은 감사!

Answer 1

서버에서 이미지 크기를 미리 얻을 수 있다면이를 사용하여 '.popup'크기를 적절하게 조절할 수 있습니다.

이미지가 필요하지 않은 경우 이미지를 미리 가져 오는 것이 좋지 않은 것처럼 들리지만 HTML이 프로그래밍 방식으로 생성되기 전에 특정 이미지가로드되도록하는 방법을 생각할 수 없습니다.