如何在頁面處理圖像時使用JQuery更新頁面的DOM？

與Facebook的評論非常相似，我爲用戶構建了一個消息系統。如何在頁面處理圖像時使用JQuery更新頁面的DOM？

每個評論都有他們的個人資料圖片旁邊的小圖片。我通過讓ColdFusion將主配置文件圖像調整爲更小的大小來實現這一點。它在飛行中這樣做，因此我不必存儲大小版本的相同配置文件圖像。

如果評論是新的，那麼檔案圖片就是50x50px。但是，如果評論是回覆，那麼它將是30x30px左右。再次，調整大小由ColdFusion函數來完成。

如果我AJAX提交評論表單，我希望評論在頁面上顯示而不刷新。我可以從插入新評論後ColdFusion返回的JSON對象中獲取所需的所有信息以更新DOM。但是，返回的配置文件圖像文件名將指向原始大圖片。如果我將這個原始大圖傳遞給DOM，那麼ColdFusion調整大小函數將無法看到它，所以我最終得到了一張巨大的圖像作爲他們的配置文件圖片。

那麼當一個頁面上的元素需要應用服務器處理時，如何使用AJAX和JQuery來更新DOM呢？

來源

2014-09-04 volume one

怎麼辦呢？什麼是'CF調整大小功能'？ – charlietfl 2014-09-05 10:14:36

@charliefl它只是調整圖像的大小，例如ImageScaleToFit（myImage.jpg，150，150）。所以它的意思是獲得圖像並將其縮放，使其適合150x150x的盒子。它保持縱橫比，因此圖像不會全部傾斜。 – 2014-09-05 12:43:07

相當簡單的CSS，不同類更小的圖像 – charlietfl 2014-09-05 13:18:13

雖然css可能是更簡單的方法，但仍然可以使用ImageScaleToFit（）調用來獲取圖像。

如果您將此功能移至其自己的腳本或遠程功能，您可以將文件名傳遞給它，並讓它返回調整大小的圖像。

單個文件示例：

<cfset image_obj = ImageRead(url.image)> 
<cfset ImageScaleToFit(image_obj, 50, 50)> 

<cfheader name="Content-Disposition" value="inline; filename=myimage.jpg"> 
<cfcontent variable="#ToBinary(ToBase64(image_obj))#" type="image/jpeg">

遙控功能例如：

<cffunction access="remote" name="renderImage" output="true" returntype="void"> 
    <cfargument name="image" type="string" required="true"> 

    <cfset var image_obj = ImageRead(arguments.image)> 
    <cfset ImageScaleToFit(image_obj, 150, 150)> 

    <cfheader name="Content-Disposition" value="inline; filename=myimage.jpg"> 
    <cfcontent variable="#ToBinary(ToBase64(image_obj))#" type="image/jpeg"> 
</cffunction>

然後，只需將您的圖像標籤的源引用您的腳本或遠程函數調用，具有返回圖片文件名從你的ajax調用作爲圖像變量。

單個文件示例：

<img src="/image_scale.cfm?image=myimage.jpg">

遙控功能例如：

<img src="/image.cfc?method=renderImage&image=myimage.jpg">

這是一個有點透明的，你可以使用重寫規則，創造更多一點混淆，但它會做的伎倆。

如果您確實想使用CSS，您可以簡單地使用最大寬度/最大高度樣式縮小圖像。它仍然是完整的形象，所以如果你擔心文件大小，這不會緩解。

<img src="myimage.jpg" style="max-width:150px; max-height:150px;">

不知道你的用戶羣是什麼，但你可以在這裏看到支持的瀏覽器及其版本：WWW3schools.com

來源

2014-09-05 14:39:16

因此，當圖像源從JSON返回字符串時，Coldfusion可以使用該文件名來調整它的大小？我不明白如何。 – 2014-09-05 15:00:33

它調整它你現在正在做同樣的方式（通過ImageScaleToFit（））你只是通過它通過URL參數的文件路徑。你現在沒有使用文件路徑來調整它的大小嗎？ – 2014-09-05 18:29:42

我正在使用文件路徑，但文件名來自數據庫。所以在我的JSON它會像'「檔案」：{「全名」：「約翰·史密斯」，「ProfileImg」：「myface.jpg」}'所以在JQuery的我要這個，做追加到列表的東西如'

'所以網頁顯示myface.jpg的全尺寸PIC，而如果它是來自數據庫的將爲此代替'

' – 2014-09-05 22:41:59

如何在頁面處理圖像時使用JQuery更新頁面的DOM？

回答

相關問題