javascript - Why the slider plugin show before it is ready to generate? -


i use jquery slider plugin "slippry" :

http://slippry.com/

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.

enter image description here

and in second , generated , show this

enter image description here

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

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

python - How to remove the Xframe Options header in django? -