在页面加载时触发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文本和图片预览

回答

相关问题