作者musie (Sirius)
看板Ajax
標題Re: [問題] load裡面有圖
時間Thu Apr 5 10:03:36 2012
※ 引述《Qiqi (潑潑)》之銘言：
: //---js---//
: $('li').click(function(){
: $('div').hide('slow',function(){
: $(this).load('123.html',function(){
: $(this).show('slow');
: });
: });
: });
: //---123.html---//
: <img src="image.png" />
: --------------------------------
: 有沒有辦法在load後判定html裡面的圖片已經讀取完再做show的動作？
: 因為第一次讀取時會看不到show的動畫，直接圖片跳出來
: (因為show完了沒東西，讀完圖才貿然呈現)
: -----------------------edit--------------
: 我不知道是不是我的表達方式太爛，所以沒人看得懂我的問題
: 現在123.html只有一行圖片的程式碼
: <img src="image.png" />
: 但是這張圖很大，譬如20MB
: 所以我在js用load後show出來會lag
: $('div').load('123.html',function(){ $(this).show('slow'); })
: div在show的過程會卡卡，因為圖還在讀的關係
: 有辦法判定圖讀取完後再做show的動作嗎？
javascript有提供預載圖片功能..
var src = 'yourImage.png';
var imageCheck = new Image();
imageCheck.src = src;
function checkImage(){
//假如已經讀完了
if(imageCheck.complete){
//do something you want
}
else{
//還沒讀完的話，3秒後再檢查一次
setTimeout(checkImage, 3000);
}
}
乾脆把他寫完了
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 122.146.228.192
1F：→ LaPass:咦? @@ 看起來是個好東西 04/05 10:04
※ 編輯: musie 來自: 122.146.228.192 (04/05 10:09)
2F：推 Qiqi:但是這個應該是寫在子頁面的吧？ 04/05 17:12
3F：→ Qiqi:所以我父頁load子頁時，一樣是把DOM讀完後再跑動畫 04/05 17:13
4F：→ Qiqi:但是跑動畫時，子頁面的圖還是沒載完 04/05 17:14
5F：→ Qiqi:有辦法在子頁讀完時，回報父頁的load，再進行callback嗎？ 04/05 17:17
6F：→ musie:既然你都說你的子頁只有一張圖，何不用append貼上去呢? 04/05 17:25
7F：推 Qiqi:這只是假設，並不是真的只有一張圖 04/05 17:41
8F：→ Qiqi:裡面有圖文，讀出來會再用jscrollpane設定捲軸 04/05 17:43
9F：→ Qiqi:當圖讀比較久時，jscrollpane就只會設成文字的長度 04/05 17:44
10F：→ Qiqi:沒辦法取得確實的圖+文的長度 04/05 17:44
11F：→ musie:那就跨iframe運作就好了.. 04/05 18:05
12F：→ musie:用parent.XX(); 來呼喚你父頁的function 04/05 18:07