在页面加载时触发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]);
}
}
有没有办法让页面加载时触发这两个函数?
答
添加以下内容:
$(function() {
// Trigger events on load
$(".pf_text_in").keyup();
$(".pf_text_in2").keyup();
$(".imgInp").change();
});
感谢。我会尝试,但我不完全确定那里发生了什么。你能解释一下你的答案吗? – RubyRube
您的每个函数(您想要加载时运行)绑定到需要触发的事件(例如按下某个键)。我手动给出的代码触发这些事件,并且它所包含的函数确保在加载时发生。 –
现在更清楚了。一开始我看不到你在哪里触发它。 – RubyRube