javascript - Why the slider plugin show before it is ready to generate? -
i use jquery slider plugin "slippry" :
i followed tutorial , write this:
$(document).ready(function () { $('#item').slippry(); }); </script>
and html
<ul id="item"> <?php foreach ($banner_list $key => $banner) { echo "<li>"; echo "<a href='#slide'" . $key . "><img src='" . site_url("banner/" . $banner["image_url"]) . "'></a>"; echo "</li>"; } ?> </ul>
the problem , there second slider show when not ready.
and in second , generated , show this
also , if press f5 not have problem (perharps cached?) when press enter @ address bar enter page again has same problem again. how fix problem ? thanks
try
$(document).ready(function () { $('#item').slippry(); $('#item').show(); });
and
#item{ display:none; }
to prevent reflow(page jumps , down until images load) make container #item
, apply following css
#item{ display:none; padding-bottom:30%; } #item-container{ position: relative; height: 0; overflow: hidden; } #item img{ position: absolute; top: 0; left: 0; width:100%; }
see how prevent reflow further details
Comments
Post a Comment