Content not load on page load.. sometimes

Content not load on page load.. sometimes

Hello!

I'm using rest to get som images from a data source. The REST works just fine. I using a jQuery Image slider library as well that also works just fine. However to combine this two seems a bit tricky becase if there seems to be some issue with the sequense the stuff loads.

I tried to change order and to use doc ready on the rest but it's not perfect.. The issue is that the images dont show up on the page until I hit F5 and reload the page.. but just sometimes, lets say it works 6 times of 10 when accessing the page for the first time :) If I press F5 it works often but sometimes not..

Any ideas on this?


 
<script type="text/javascript">
jQuery(window).load(function(){
 $('#banner-slide').bjqs({
 animtype      : 'slide', //fade
 height        : 320,
 width         : 340
});
});









$.ajax({
url: "MyURLGoesHere..",
type: "GET",
headers: {"Accept": "application/json;odata=verbose"},
cache:false,                
success: function(data){
 var items = [];
 items.push("<div id='banner-slide'>");
 items.push("<ul class='bjqs'>")
  $(data.d.results).each(function(){
  items.push('<li>' + this.Title + '</li>');
  });
 items.push("</ul>");
 items.push("</div>");
 $("#output").html(items.join(''));
}
});
</script>
<div id="output"></div>





















<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="bjqs-1.3.min.js"></script>