[OpenBSD]

I found this plugin for News Ticker. I edited this for Images News Ticker. This worked fine but I see in Firebug that after loading 4 images, this plugin doesn't cache images, gets images from the server. How do I cache images? How I stop the images from being taken from the server after the fourth image?

The online demo is here.


Thanks

This post has been edited by OpenBSD: 12 March 2012 - 12:20 AM

[thrca]

Well, this is just how that plugin works.. My suggestion is to contact the author of that plugin and suggest that he should "cache the next image to be displayed", so each time the ticker moves, it loads the picture that will be displayed next, otherwise, the problem you are having is likely to show, which is that you are getting a ticker moving in with a broken picture until it loads.

Otherwise, you could make a hidden div on your page and put all the images inside it, this way they will all get loaded when your page loads. HINT: put it at the END of your page, otherwise it will delay your page loading time

[OpenBSD]

thrca, on 12 March 2012 - 08:02 AM, said:

Otherwise, you could make a hidden div on your page and put all the images inside it, this way they will all get loaded when your page loads. HINT: put it at the END of your page, otherwise it will delay your page loading time

I Dont care, what's your mean ? can you tell me using any example ? i need to this plugin and any plugin for images ticker.

Thanks

[thrca]

Put your images you want to pre-load into a hidden div, at the end of your page, like this...

<div style="display:none;">
  <img src="image1.png"/>
  <img src="image2.png"/>
  <img src="image3.png"/>
  <img src="image4.png"/>
  <img src="image5.png"/>
  <img src="image6.png"/>
</div>

[OpenBSD]

thrca, on 12 March 2012 - 08:43 AM, said:

Put your images you want to pre-load into a hidden div, at the end of your page, like this...

<div style="display:none;">
  <img src="image1.png"/>
  <img src="image2.png"/>
  <img src="image3.png"/>
  <img src="image4.png"/>
  <img src="image5.png"/>
  <img src="image6.png"/>
</div>

This solution does not seem reasonable.in fact, i dont have static images. my images generate using php while. We must find a way to edit the plugin Or get help from other plugins.

[thrca]

It looks like the plugin, at least from the jsfiddle demo, already does this.. All the ticker items are loaded at runtime in the news-container, then rotated into view.. Is it not working as you expected?

I tested Test Page

And it worked as expected, and pre-loaded all the images.
Here is the complete code for my test page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="http://www.jugbit.com/jquery/jquery.vticker-min.js"></script>
<script>
$(document).ready(function(){
$(function(){
    $('#news-container').vTicker({
        speed: 500,
        pause: 3000,
        animation: 'fade',
        mousePause: false,
        showItems: 3
    });
});
});
</script>
<style>
#news-container {
    width: 400px;
    margin: auto;
    margin-top: 30px;
    border: 5px solid #333333;
}
#news-container ul li div {
    border: 1px solid #aaaaaa;
    background: #ffffff;
}
</style>
<div id="news-container">
  <ul>
    <li>
      <div>
        <img src="http://beta.findsales.net/images/pip_green.png" alt=""/>
      </div>
    </li>
    <li>
      <div>
        <img src="http://beta.findsales.net/images/pip_pink.png" alt=""/>
      </div>
    </li>
    <li>
      <div>
        <img src="http://beta.findsales.net/images/pip_orange.png" alt=""/>
      </div>
    </li>
    <li>
      <div>
        <img src="http://beta.findsales.net/images/pip_red.png" alt=""/>
      </div>
    </li>
    <li>
      <div>
        <img src="http://beta.findsales.net/images/pip_blue.png" alt=""/>
      </div>
    </li>
  </ul>
</div>

[OpenBSD]

sure, i see. i dont know what's problem for me. i tested in php local page and generate <UL><LI> using while php loop. maybe this problem is my php page & code. I'm a little confused. can you tested using php and dynamic images ? actually, thanks thrca.

This post has been edited by OpenBSD: 12 March 2012 - 03:09 PM

[thrca]

I put up another sample with dynamic images, and it still works as expected.

Have you watched your NET capture with firebug to see if your images are taking a long time to load? Perhaps they are still loading when the ticker tries to display the first one.

[OpenBSD]

your e.x have my problems!!! please check your firebug after little time. See Firebug Screen :

[thrca]

Ok, I see what it is doing, but its just the way the plugin works.. There isn't any way to fix it other than re-writing the plugin to do it differently or contacting the author.

Basically, once it has moved the last item up into view, it removes the topmost item and re-creates it at the bottom of the list, so that it continually cycles. It is this rotation of the top item down to the bottom that is making the new request to the server. On my test server, the reason you are getting "200 OK" response is because I force .php files to no-cache.. If it were allowed to cache, the responses would be "302 not modified", but regardless, it seems to be working properly, as the images are cached locally by the client, since the request URL is identical (same rnd value), thus, the dynamic image is the same.

Not sure why this is problematic.. Is it causing a problem for you?

[thrca]

Try this demo again and see if the problem has gone away..

As long as you are using jQuery 1.4 or higher, I think I found the solution.

Edit the plugin javascript and change .remove() with .detach(), which should be in there 2 times.

Instead of removing the topmost element and recreating it at the bottom, it simply detaches the element and re-attaches it at the bottom. The bonus of this is that if you have events bound to the element, it will not destroy them (keep in mind, using .live() and .detach() together could cause a massive memory leak).

Hope this helps.