Photoswipe same source code but output not working

问题

I have this piece of code, which refreshes the content of an ul.

It works on the first load, where the content of ul is directly loaded, but i am making new content every 10 seconds so that user can always get new content.

The source code of content delivered by javascript call is exactly same as the first load. Then also javascript call does not work

The Javascript:

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

The html code is:

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

I have tried no cache and used this code in header then also no use

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

live code here

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

in addition to that can i change the urlwhen new content are inserted

回答1:

I would use jQuery ready.

Something like

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

BUT, a better way is explained by @Cletus in his answer.

There is a carousel in the example that you linked in the comment section, the issue right now is that while in the carousel, the setTimeout doesn't update the carousel

The solutions:

Create an array to store ALL the images that are being updated.
Update the imgs in the carousel, calling the carousel in the setTimeout

In both, you need to see if the code in the carousel is blocking the code of the timeout. Check with chrome dev tools, or even an alert('test'); should do the job.

来源：https://stackoverflow.com/questions/21607175/photoswipe-same-source-code-but-output-not-working

标签

javascript

php

jquery

ajax

photoswipe