Question

我正在尝试使用jQuery进行“实时”图像预览，但是现在我只有这个想法。所以我的想法是有一个div（100px / 100px）和一个输入形式，当你把链接放在那里时，可以在div中将图像“缩小”到100px / 100px。但是如果用户没有准确复制链接并开始要键入它，代码应检查链接是否适合图像（例如... / image.jpg），然后显示它。也许这个div可以使用.attr外部链接来显示图像，但整件事对我来说都很难。如果有人想帮忙，欢迎您：）

Answer 1

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

假设这是文本框：

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

预览本身有这样的容器：

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

最后这是必需的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);
    });
});

Live test case

请注意，检查网址中的“.jpg”是没有意义的，很多图片网址都没有任何扩展名，例如您的重力数字是http://www.gravatar.com/avatar/b4a2d7e5c786e61fab787097b2d4f27b?s=32&d=identicon&r=PG，因为您看到如果这是图像与否。

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

使用计时器有两个原因：

paste事件后新文本无效，因此获取新值的唯一方法是等待一段时间。
当用户输入时，在他快速打字时输入的每个字符后都没有分配点 - 让他先完成。

Answer 2

http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/

您是否检查了以上链接

每帧jquery函数

2 个答案: