java backing bean加载图片后自动调用JS函数答案

【问题标题】：Calling JS function automatically after image is loaded by java backing beanjava backing bean加载图片后自动调用JS函数
【发布时间】：2020-01-29 11:41:45
【问题描述】：

我需要我的JS 调整大小函数在 java 支持 bean 返回图像后自动调用。这是xhtml 负责图像加载的部分。它是dataGrid 的一部分。

<p:panel id="panel1" >
    <p:graphicImage id="image1" value="#{imageService.image}"  width="100%" height="100%">
        <f:param name="id" value="#{kprod.id}" />
    </p:graphicImage>
</p:panel>

这是bean方法：

public StreamedContent getImage() throws IOException {
    FacesContext context = FacesContext.getCurrentInstance();

    if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
        return new DefaultStreamedContent();
    }
    else {
        String id = context.getExternalContext().getRequestParameterMap().get("id");
        return findImage(Long.valueOf(id));
    }
}

完成渲染阶段后，它会转到返回实际图像的 else 分支。

我正在工作JS 函数resizeImage()。我通过将属性onclick="resizeImage()" 添加到<p:graphicImage> 来测试它，然后单击图像并正确调整大小。我现在需要的是自动调用这个函数。 <p:graphicImage> 没有我可以使用的任何属性。我还尝试将<p:ajax oncomplete="resizeImage()" /> 参与到<p:graphicImage> 节点中，但每次我使用ajax 时都会返回此错误：

无法确定事件属性：null

我还有一个子问题。最终 HTML 中的实际图像 ID 是 contentForm:kprods:7:image1，其中数字根据顺序可变。有没有办法将元素的JS id 作为参数传递给？

非常感谢。

【问题讨论】：

纯客户端问题...stackoverflow.com/questions/39157657/ddg#39160299
我知道这是客户端。我希望客户端调整图像大小而不是服务器。但是我对您的评论的发现。当我使用$("image1").load(function() { console.log("test"); }); 时，我的控制台什么也没打印。如果我使用$("image1").load(resizeImage());，它总是会转到 resizeImage() 函数。但无论我使用什么 ID，它都会出现在那里。如果我使用$("whatever").load(resizeImage());，它也会起作用。但没有调整图像大小。似乎$(this).height(h); 不起作用，因为“this”不是指图像。宽度也一样。尽管我渲染了更多图像，但它只被调用一次。
uhhhhhhh....请学习基本的jquery...$("image1")试图找到以image1为标签的HTML标签！！！如果您想使用 id，请在链接 $("img") 或 $("#image1") 中使用它
这不会向控制台打印任何内容$("img").load(function() { console.log("test"); }); 这既不是$("#image1").load(function() { console.log("test"); }); 这$("foo").load(printTest()); 总是向控制台打印文本，无论 ID 是什么。我不明白它为什么会这样。
你确定$("img").load(function() ...是在图片加载之前执行的吗？

标签： javascript java primefaces xhtml

【解决方案1】：

好吧，我找到了解决方案。基本上我只需要在 load 事件上运行我的函数。但是 primefaces 元素 <p:graphicImage> 没有 onload 属性。

所以我在我的 xhtml 新命名空间中添加了传递属性：

xmlns:x="http://xmlns.jcp.org/jsf/passthrough".

并为graphicImage元素添加x:onload属性：

<p:panel id="panel1" >
    <p:graphicImage id="image1" value="#{imageService.image}" x:onload="resizeImage(this.id)" width="100%" height="100%">
        <f:param name="id" value="#{kprod.id}" />
    </p:graphicImage>
</p:panel>

然后我检查了最终的 HTML，我的函数添加了 onload 属性到<img> 元素。

【讨论】：