每幀jquery函數

我試圖做一個「活」的圖像預覽與jQuery，但現在我只有這個想法。因此，這個想法是有一個div（100px/100px）和一個輸入表單，並且當你把鏈接放在div裏時，將圖像「縮小」可視化爲100px/100px。但是如果用戶不準確地複製鏈接並開始要輸入它，代碼應檢查鏈接是否適合圖像（例如.../image.jpg），然後顯示它。我會讓這個div與外部的.attr鏈接形象化，但整個事情對我來說很難。如果有人想幫助，歡迎你:)每幀jquery函數

來源

2012-09-23 Yoan Dinkov

最簡單的方法並不複雜，只是一個文本框，一個佔位符和一些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。

請注意，在URL中檢查「.jpg」是毫無意義的，許多圖片網址沒有任何擴展名，例如您的圖片爲http://www.gravatar.com/avatar/b4a2d7e5c786e61fab787097b2d4f27b?s=32&d=identicon&r=PG，因爲您看到如果圖片是否是無法單獨通過網址分辨。

邏輯很簡單：將給定的URL分配到<img>並在佔位符內顯示它。如果圖像對象onerror觸發它意味着圖像無效，將其隱藏並可選擇顯示自定義友好信息。

使用定時器，原因有二：

新的案文是不是paste事件後可用的權利，因此要獲得新的價值的唯一途徑是等待一點時間。
當用戶輸入內容時，輸入的每個字符輸入後都沒有指定的位置 - 讓他先完成輸入。

來源

2012-09-23 13:31:15

非常感謝。這是我想要的:)再次感謝。 –

沒問題，很高興我能幫上忙。 –

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

您檢查上面的鏈接

來源

2012-09-23 11:48:01

每幀jquery函數

回答

相關問題