2017-12-27 468 views
2

我有一個文本預覽功能,它可以顯示用戶在輸入樣式CSS時輸入的標題。當用戶保存該頁面時,關閉應用程序並稍後嘗試編輯其文本,其保存的文本不會在加載頁面時顯示。在頁面加載時觸發Javascript文本和圖片預覽

只有當用戶按下某個鍵時,他們的保存文本纔會出現在屏幕上。

默認文本:您的標題這裏

用戶節省了:我的水耕農場。

10分鐘後,使用者重新載入頁面,看到:

默認文本:您的標題這裏。

按下一個鍵,看到自己保存的文本:

我的水培農場

的JS不會觸發,直到按下一個鍵。它應該在頁面加載時觸發。

$(function() { 
$(".pf_text_in").keyup(function() { 
    var pf_text_in = $(this).val(); 
    $(".text_preview").html(pf_text_in); 
    return false; 
}); 
}); 

    $(function() { 
$(".pf_text_in2").keyup(function() { 
    var pf_text_in = $(this).val(); 
    $(".text_preview2").html(pf_text_in); 
    return false; 
}); 
}); 

*

PIC的預覽有同樣的問題。頁面重新加載時不顯示保存的圖片。僅顯示默認佔位符jpgs。

$(".imgInp").change(function() { 
    readURL(this); 
}); 

function readURL(input) { 
    var $formPic = $(input).siblings('img'); 
    if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     $formPic.attr('src', e.target.result); 
    }; 
    reader.readAsDataURL(input.files[0]); 
    } 
} 

有沒有辦法讓頁面加載時觸發這兩個函數?

回答

1

添加以下內容:

$(function() { 
    // Trigger events on load 
    $(".pf_text_in").keyup(); 
    $(".pf_text_in2").keyup(); 
    $(".imgInp").change(); 
}); 
+0

感謝。我會嘗試,但我不完全確定那裏發生了什麼。你能解釋一下你的答案嗎? – RubyRube

+0

您的每個函數(您想要加載時運行)綁定到需要觸發的事件(例如按下某個鍵)。我手動給出的代碼觸發這些事件,並且它所包含的函數確保在加載時發生。 –

+0

現在更清楚了。一開始我看不到你在哪裏觸發它。 – RubyRube