如何在页面处理图像时使用JQuery更新页面的DOM？

Question

与Facebook的评论非常相似，我为用户构建了一个消息系统。

每个评论都有他们的个人资料图片旁边的小图片。我通过让ColdFusion将主配置文件图像调整为更小的大小来实现这一点。它在飞行中这样做，因此我不必存储大小版本的相同配置文件图像。

如果评论是新的，那么档案图片就是50x50px。但是，如果评论是回复，那么它将是30x30px左右。再次，调整大小由ColdFusion函数来完成。

如果我AJAX提交评论表单，我希望评论在页面上显示而不刷新。我可以从插入新评论后ColdFusion返回的JSON对象中获取所需的所有信息以更新DOM。 但是，返回的配置文件图像文件名将指向原始大图片。如果我将这个原始大图传递给DOM，那么ColdFusion调整大小函数将无法看到它，所以我最终得到了一张巨大的图像作为他们的配置文件图片。

那么当一个页面上的元素需要应用服务器处理时，如何使用AJAX和JQuery来更新DOM呢？

Answer 1

虽然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