如何更新页面'；当页面处理动态图像时，如何使用JQuery实现DOM？

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

每条评论旁边都有一张他们的个人资料图片。我通过让ColdFusion将主配置文件图像调整为更小的大小来实现这一点。它可以动态地执行此操作，这样我就不必存储同一个配置文件图像的大小版本

如果注释是新的，那么配置文件pic是50x50px。但如果评论是回复，那么它将是30x30px左右。同样，大小由ColdFusion函数处理

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

---

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

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

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

远程功能示例：

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

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

然后只需将图像标记的源设置为引用脚本或远程函数调用，并将ajax调用返回的图像文件名作为图像变量

单文件示例：

<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">

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

远程功能示例：

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

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

它有点透明，您可以使用重写规则来创建更多的混淆，但它可以做到这一点

如果您确实想使用CSS，您可以简单地使用“最大宽度/最大高度”样式来缩小图像。它仍然是完整的图像，因此，如果您担心文件大小，这将不会缓解这一问题

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

---

不确定您的用户群是什么，但您可以在此处看到受支持的浏览器及其版本：

如何做什么？什么是

CF resize函数？@charliefl它只调整图像大小，例如ImageScaleToFit（myImage.jpg，150150）。所以它的意思是获取图像并缩放它，使其适合一个150px×150x的盒子。它保持了纵横比，因此图像不会全部倾斜。使用css做这件事相当简单，较小的图像使用不同的类，这样我就不必存储大版本和小版本为什么？图像功能是资源密集型的。空间很便宜。对每一个http请求执行一次而不是多次图像处理会更有效。@Leigh我不知道这一点。我只是没想到Facebook或其他巨头会存储同一图像的多个版本，特别是当他们使用CSS精灵来处理图像时，以保持快速快速。因此，当图像源以字符串形式从JSON返回时，Coldfusion可以使用该文件名来调整其大小？我不明白怎么做。它正在以与您现在相同的方式调整大小（通过ImageScaleToFit（）），您只需通过URL参数将路径传递给文件即可。您现在没有使用文件路径调整大小吗？我使用的是文件路径，但文件名来自数据库。因此，在我的JSON中，它将类似于
“Profile”：{“Fullname”：“John Smith”，“ProfileImg”：“myface.jpg”}
因此，在JQuery中，我会将其附加到一个列表中，类似于
，这样网页会显示myface.jpg的完整图片，而如果它来自数据库，则会执行此操作
，那么我们可以假设您的所有图像文件都将位于同一文件夹中吗？也就是说，所有这些图像都在“/images/”文件夹中吗？它更像是“images/userid/mypic.jpg”，其中userid是数据库表中给该用户的唯一id。