Question

我有一个网页，我需要定期更新图像在几个条件下。现在我正在使用它：

 <html>
   <head>
   <meta http-equiv="refresh" content="3">
   </head>
    <body>
        <img src="${createLink(controller:'advertisment',action:'viewImage',id:advertismentInstance.id)}"/>
    </body>
</html>

但它会导致网页的重新加载，所以我希望它能够完成使用Ajax（我也使用Grails默认的Prototype框架）。

提供广告控制器方法：

 def viewImage = {
        log.info("before view Image")
        def adv = Advertisment.get(params.id)
        byte[] image = adv.fileContent
        response.outputStream << image
        log.info("after view Image")
    }

设备控制器方法：

def showAdv =
    {
        log.info("showAdv start")

        def deviceInstance = Device.get(params.id)
        int totalNumberOfAdv = deviceInstance.advertisment.size();
        Random rand = new Random()
        int advToShow = rand.nextInt(totalNumberOfAdv+1) - 1;

        def advertismentInstance = deviceInstance.advertisment.toArray()[advToShow]
        if(advertismentInstance)
        {
            render(view: "image", model: [deviceInstance :deviceInstance,advertismentInstance: advertismentInstance])
        }
        else
        {
            flash.message = "${message(code: 'default.not.found.message', args: [message(code: 'advertisment.label', default: 'Advertisment'), params.id])}"
        }

        log.info("showAdv end")

    }

Answer 1

为您的<img/>提供ID：

<img id="foo" src="..."/><!-- keep the existing src -->

删除刷新页面的<meta/>。

在结束</body>标记之前，添加以下内容：

<script>
var img = document.getElementById('foo'); // id of image
setInterval(function() {
    var stamp = new Date().getTime();
    img.setAttribute('src', img.getAttribute('src') + '?_=' + stamp);
}, 3000);
</script>

更新viewImage动作，以便在渲染图像之前实际进行随机化。这可能意味着将showAdv的部分组合到viewImage。

使用Grails中的ajax动态刷新图像

1 个答案: