Question

我有这段代码，它会刷新ul的内容。

它适用于第一次加载，其中ul的内容是直接加载的，但是我每10秒创建一次新内容，以便用户可以随时获取新内容。

javascript调用传递的内容源代码与第一次加载完全相同。然后javascript调用也不起作用

Javascript：

<script type="text/javascript">
    setInterval(function() {
        $("#vbar").load(location.href+" #vbar>*","");
    }, 10000);
</script>

html代码是：

<ul  id="vbar" class="gallery">           
    <li>
        <a href="http://i2.listal.com/image/3550836/600full-taylor-swift.jpg" rel="external">Taylor Swift  </a>
    </li>
    <li>
        <a href="http://i2.listal.com/image/303530/600full-jessica-lange.jpg" rel="external">Jessica Lange  </a>
    </li>
    <li>
        <a href="http://i2.listal.com/image/2844304/600full.jpg" rel="external">  </a>
    </li>
    <li>
        <a href="http://i2.listal.com/image/524086/600full-caroline-ribeiro.jpg" rel="external">Caroline Ribeiro  </a>
    </li>
    <li>
        <a href="http://i2.listal.com/image/2402821/600full-francine-dee.jpg" rel="external">Francine Dee  </a>
    </li>                
</ul>

我没有尝试过缓存并在标头中使用此代码，然后也没有使用

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

现场代码

    http://www.way2enjoy.com/touch/w2et/newphoto12.php

除此之外，我可以在插入新内容时更改网址

Answer 1

我会使用jQuery ready。

像

这样的东西

<script type="text/javascript">
$(document).ready(function(){
    setInterval(function() {
        $("#vbar").load(location.href+" #vbar>*","");
    }, 10000);
});
</script>

但是@Cletus in his answer解释了更好的方法。

示例中有you linked in the comment section的轮播，现在的问题是在轮播中，setTimeout不会更新轮播

解决方案：

创建一个数组来存储所有正在更新的图像。
更新轮播中的imgs，在setTimeout中调用轮播

在两者中，您需要查看轮播中的代码是否阻止了超时代码。使用chrome dev工具检查，甚至警告（'test'）; 应该完成这项工作。

Photoswipe相同的源代码但输出无效

1 个答案: