在頁面加載時觸發Javascript文本和圖片預覽

我有一個文本預覽功能，它可以顯示用戶在輸入樣式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]); 
    } 
}

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

來源

2017-12-27 RubyRube

添加以下內容：

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

來源

2017-12-27 18:36:10

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

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

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

在頁面加載時觸發Javascript文本和圖片預覽

回答

相關問題