每帧jquery函数

我试图用jQuery制作一个“实时”的图像预览，但现在我只有这个想法。所以，我们的想法是有一个div（100px/100px）和一个输入表单，当你把链接放在那里，在div中可视化一个图像“收缩”到100px/100px。但是如果用户没有准确复制链接并开始键入，代码应该检查链接是否正确到图像（例如…/image.jpg），然后显示它。我可能会让这个div可视化一个与.attr有外部链接的图像，但整个事情对我来说都很难。如果有人想帮忙，欢迎：）

---

你检查过上面的链接了吗？

简单的方法并不复杂，只有一个文本框、一个占位符和一些jQuery代码

假设这是文本框：

<input type="text" id="txtImagePreview" />

为预览本身提供这样的容器：

<div id="ImagePlaceHolder"><span class="error">Invalid image URL</span></div>

无效的图像URL

最后，这是所需的jQuery代码：

$(document).ready(function() {
    var timer = 0;
    $("#ImagePlaceHolder .error").hide();
    var oPreviewImage = $("<img />");
    oPreviewImage.bind("error", function() {
        $(this).hide();
        $(this).parent().find(".error").show();
    });
    $("#ImagePlaceHolder").append(oPreviewImage);
    oPreviewImage.hide();
    $("#txtImagePreview").bind("keyup paste", function() {
        window.clearTimeout(timer);
        var txtPreview = $(this);
        timer = window.setTimeout(function() {
            $("#ImagePlaceHolder").find(".error").hide();
            var imageURL = txtPreview.val();
            oPreviewImage.attr("src", imageURL);
            oPreviewImage.show();
        }, 500);
    });
});​

$（文档）.ready（函数（）{
var定时器=0；
$（“#ImagePlaceHolder.error”）.hide（）；
var oPreviewImage=$（“

请注意，在URL中检查“.jpg”是没有意义的，许多图像URL没有任何扩展名，例如您的gravatar是
http://www.gravatar.com/avatar/b4a2d7e5c786e61fab787097b2d4f27b?s=32&d=identicon&r=PG
正如您所见，单凭URL无法判断这是否是图像

逻辑很简单：将给定的URL分配到
中，并在占位符中显示它。如果图像对象
onerror
触发，则表示图像无效，隐藏它并可选地显示自定义友好消息

使用计时器有两个原因：


新文本在
粘贴
事件之后不可用，因此获取新值的唯一方法是等待一段时间

当用户在打字时，当他快速打字时，在每个字符之后没有分配点-让他先完成

没问题，很高兴我能帮忙。