Menu icon Foundation
Orbit Display Lag in Firefox

Hi,

I encounter a big issue on Firefox. I use Orbit slider with a huge number of image, with an average image weight of 200 ko, and when the page is displaying, without cache, Firefox stop displaying the page, go on, stop, go on...

The probleme is seen on labtop (and quite visible on my iMac). I checked with Firebug, and Firefox seems to wait for request access to server images. And when he waits, he stop and freeze the window.

Do you know how i can solde the issue ?

Thank you.

This is the webpage. http://ryan.adala.mansolutions.fr/mens-shoes.php

This my code

<!DOCTYPE html>
<html class="uk-height-1-1 uk-responsive-height">
 
    <head> 
    
        <title>Ryan Adala</title>
        <link rel="stylesheet" href="css/uikit.almost-flat.css" />
        <link rel="stylesheet" href="css/slides-mens-shoes.min.css" />
      
    </head>
               
    <body class="uk-height-1-1 uk-responsive-height">
    
    <!-- This is the animations start --> 
    
    <div class="container-animations uk-height-1-1" data-uk-scrollspy="{cls:'uk-animation-container-mens-shoes', delay:900}">
    
        <div class="first-animation-mens-shoes uk-height-1-1" data-uk-scrollspy="{cls:'uk-animation-mens-shoes-1', delay:900}"> 
    	
    	</div>
    	
    	<div class="second-animation-mens-shoes uk-height-1-1" data-uk-scrollspy="{cls:'uk-animation-mens-shoes-2', delay:6500}"> 
    	
    	</div>
    		
    </div>
 	
 	<!-- This is the animations end -->
    
    <!-- This is the wrapper page start --> 
    
    <div class="wrapper-page uk-height-1-1">
          
    	<!-- This is the wrapper content start --> 
    
    	<div class="wrapper-content uk-height-1-1">
    	  	
    		<!-- This is the wrapper top logo start -->
    	
    		<div class="wrapper-top-logo uk-width-1-1">
    		
    			<img src="images/top-logo.jpg" />
    		
    		</div>
    		
    		<!-- This is the wrapper top logo end -->
    		
    		<!-- This is the wrapper top menu start -->
    	
    		<div class="wrapper-top-menu uk-width-1-1">
    		
    			<nav class="uk-navbar uk-navbar-attached">
    
    <ul class="uk-navbar-nav">
        
        <li><a href="home.php">Home</a></li>
        <li><a href="limited-edition.php">Limited Edition</a></li>
        <li><a href="rayan-adala-interieur.php">Rayan Adala Interieur</a></li>
        <li><a href="rayan-adala-excellence-intro.php">Rayan Adala Excellence</a></li>
        <li><a href="womens-bag.php">Women's Bag</a></li>
        <li><a href="mens-bag.php">Men's Bag</a></li>
        <li><a href="womens-shoes.php">Women's Shoes</a></li>
        <li><a href="mens-shoes.php">Men's Shoes</a></li>
        <li><a href="">Contact</a></li>
    
    </ul>
    
</nav>    	    		
    		</div>
    		
    		<!-- This is the wrapper top menu end -->
    		
    		<!-- This is the container content start -->
    		
    		<div class="content-container uk-grid uk-height-1-1 uk-responsive-height" data-uk-scrollspy="{cls:'uk-animation-fade', delay:14500}"> 
    		
    			<!-- This is the container left column start -->
    		
    			<div class="uk-width-1-10 uk-height-1-1">
    			
    				<div class="mens-shoes-content-left-column uk-panel-box uk-height-1-1 uk-responsive-height">
    				
    					<div class="uk-width-1-1 uk-height-1-1 uk-vertical-align">
    					
    						<div class="left-column-link uk-panel-box uk-vertical-align-middle uk-width-1-1 uk-text-center">
    						
    							<a href="mens-shoes.php">Men's Shoes</a>
    						
    						</div>
    						
    					</div>
    				
    				</div>
    				
    			</div>
    			
    			<!-- This is the container left column end -->
    			
    			<!-- This is the container middle column start -->
    			
    			<div class="uk-width-8-10 uk-height-1-1">
    			
    				<div class="mens-shoes-content-middle-column uk-panel-box uk-height-1-1 uk-responsive-height">
    				
    					<span class="orbit-copyright">Property of Rayan Adala</span>
    				
    					<div class="orbit-image-set-container">
    				
    					</div>
    					<div class="preloader"></div>
    					<ul data-orbit>
    					  
    					  	<li><img class="slide-1" /></li>
    					  	<li><img class="slide-2" /></li>
    					  	<li><img class="slide-3" /></li>
    					  	<li><img class="slide-4" /></li>
    					  	<li><img class="slide-5" /></li>
    					  	<li><img class="slide-6" /></li>
    					  	<li><img class="slide-7" /></li>
    					  	<li><img class="slide-8" /></li>
    					  	<li><img class="slide-9" /></li>
    					  	<li><img class="slide-10" /></li>
    					  	<li><img class="slide-11" /></li>
    					  	<li><img class="slide-12" /></li>
    					  	<li><img class="slide-13" /></li>
    					  	<li><img class="slide-14" /></li>
    					  	<li><img class="slide-15" /></li>
    					  	<li><img class="slide-16" /></li>
    					  	<li><img class="slide-17" /></li>
    					  	<li><img class="slide-18" /></li>
    					  	<li><img class="slide-19" /></li>
    					  	<li><img class="slide-20" /></li>
    					  	<li><img class="slide-21" /></li>
    					  	<li><img class="slide-22" /></li>
    					  	<li><img class="slide-23" /></li>
    					  	<li><img class="slide-24" /></li>
    					  	<li><img class="slide-25" /></li>
    					  	<li><img class="slide-26" /></li>
    					  	<li><img class="slide-27" /></li>
    					  	<li><img class="slide-28" /></li>
    					  	<li><img class="slide-29" /></li>
    					  	<li><img class="slide-30" /></li>
    					  	<li><img class="slide-31" /></li>
    					  	<li><img class="slide-32" /></li>
    					  	<li><img class="slide-33" /></li>
    					  	<li><img class="slide-34" /></li>
    					  	<li><img class="slide-35" /></li>
    					  	<li><img class="slide-36" /></li>
    					  	<li><img class="slide-37" /></li>
    					  	<li><img class="slide-38" /></li>
    					  	<li><img class="slide-39" /></li>
    					  	<li><img class="slide-40" /></li>
    					  	<li><img class="slide-41" /></li>
    					  	<li><img class="slide-42" /></li>
    					  	<li><img class="slide-43" /></li>
    					  	<li><img class="slide-44" /></li>
    					  	<li><img class="slide-45" /></li>
    					  	<li><img class="slide-46" /></li>
    					  	<li><img class="slide-47" /></li>
    					  	<li><img class="slide-48" /></li>
    					  	<li><img class="slide-49" /></li>
    					  	<li><img class="slide-50" /></li>
    					  	<li><img class="slide-51" /></li>
    					  	<li><img class="slide-52" /></li>
    					  	<li><img class="slide-53" /></li>
    					  	<li><img class="slide-54" /></li>
    					  	<li><img class="slide-55" /></li>
    					  	<li><img class="slide-56" /></li>
    					  	<li><img class="slide-57" /></li>
    					  	<li><img class="slide-58" /></li>
    					  	<li><img class="slide-59" /></li>
    					  	<li><img class="slide-60" /></li>
    					  	<li><img class="slide-61" /></li>
    					  	<li><img class="slide-62" /></li>
    					  	<li><img class="slide-63" /></li>
    					  	<li><img class="slide-64" /></li>
    					  	<li><img class="slide-65" /></li>
    					  	<li><img class="slide-66" /></li>
    					  	<li><img class="slide-67" /></li>
    					  	<li><img class="slide-68" /></li>
    					  	<li><img class="slide-69" /></li>
    					  	<li><img class="slide-70" /></li>
    					  	<li><img class="slide-71" /></li>
    					  	<li><img class="slide-72" /></li>
    					  	<li><img class="slide-73" /></li>
    					  	<li><img class="slide-74" /></li>
    					  	<li><img class="slide-75" /></li>
    					  	<li><img class="slide-76" /></li>
    					  	<li><img class="slide-77" /></li>
    					  	<li><img class="slide-78" /></li>
    					  	<li><img class="slide-79" /></li>
    					  	<li><img class="slide-80" /></li>
    					  	<li><img class="slide-81" /></li>
    					  	<li><img class="slide-82" /></li>
    					  	<li><img class="slide-83" /></li>
    					  	<li><img class="slide-84" /></li>
    					  	<li><img class="slide-85" /></li>
    					  	<li><img class="slide-86" /></li>
    					  	<li><img class="slide-87" /></li>
    					  	<li><img class="slide-88" /></li>
    					  	<li><img class="slide-89" /></li>
    					  	<li><img class="slide-90" /></li>
    					  	<li><img class="slide-91" /></li>
    					  	<li><img class="slide-92" /></li>
    					  	<li><img class="slide-93" /></li>
    					  	<li><img class="slide-94" /></li>
    					  	<li><img class="slide-95" /></li>
    					  	<li><img class="slide-96" /></li>
    					  	<li><img class="slide-97" /></li>
    					  	<li><img class="slide-98" /></li>
    					  	<li><img class="slide-99" /></li>
    					  	<li><img class="slide-100" /></li>
    					  	<li><img class="slide-101" /></li>
    					  	<li><img class="slide-102" /></li>
    					  	<li><img class="slide-103" /></li>
    					  	<li><img class="slide-104" /></li>
    					  	<li><img class="slide-105" /></li>
    					  	<li><img class="slide-106" /></li>
    					  	<li><img class="slide-107" /></li>
    					  	<li><img class="slide-108" /></li>
    					  	<li><img class="slide-109" /></li>
    					  	<li><img class="slide-110" /></li>
    					  	<li><img class="slide-111" /></li>
    					  	<li><img class="slide-112" /></li>
    					  	<li><img class="slide-113" /></li>
    					  	<li><img class="slide-114" /></li>
    					  	<li><img class="slide-115" /></li>
    					  	<li><img class="slide-116" /></li>
    					  	<li><img class="slide-117" /></li>
    					  	<li><img class="slide-118" /></li>
    					  	<li><img class="slide-119" /></li>
    					  	<li><img class="slide-120" /></li>
    					  	<li><img class="slide-121" /></li>
    					  	<li><img class="slide-122" /></li>
    					  	<li><img class="slide-123" /></li>
    					  	<li><img class="slide-124" /></li>
    					  	<li><img class="slide-125" /></li>
    					  	<li><img class="slide-126" /></li>
    					  	<li><img class="slide-127" /></li>
    					  	<li><img class="slide-128" /></li>
    					  	<li><img class="slide-129" /></li>
    					  	<li><img class="slide-130" /></li>
    					  	<li><img class="slide-131" /></li>
    					  	<li><img class="slide-132" /></li>
    					  	<li><img class="slide-133" /></li>
    					  	<li><img class="slide-134" /></li>
    					  	<li><img class="slide-135" /></li>
    					  	<li><img class="slide-136" /></li>
    					  	<li><img class="slide-137" /></li>
    					  	<li><img class="slide-138" /></li>
    					  	<li><img class="slide-139" /></li>
    					  	<li><img class="slide-140" /></li>
    					  	<li><img class="slide-141" /></li>
    					  	<li><img class="slide-142" /></li>
    					  	<li><img class="slide-143" /></li>
    					  	<li><img class="slide-144" /></li>
    					  	<li><img class="slide-145" /></li>
    					  	<li><img class="slide-146" /></li>
    					  	<li><img class="slide-147" /></li>
    					  	<li><img class="slide-148" /></li>
    					  	<li><img class="slide-149" /></li>
    					  	<li><img class="slide-150" /></li>
    					  	<li><img class="slide-151" /></li>
    					  	<li><img class="slide-152" /></li>
    		
    					</ul>
    				
    				
    				</div>
    				
    			</div>
    			
    			<!-- This is the container middle column end -->
    			
    			<!-- This is the container right column start -->
    			
    			<div class="uk-width-1-10 uk-height-1-1 ">
    			
    				<div class="mens-shoes-content-right-column uk-panel-box uk-height-1-1 uk-responsive-height">
    				
    				
    				</div>
    				
    			</div>
    			
    			<!-- This is the container right column end -->
    			
    		</div>
    		
    		<!-- This is the container content end -->
    		
    		<!-- This is the wrapper bottom menu start -->
    		
    		<div class="wrapper-bottom-menu uk-width-1-1">
    		
    				<nav class="uk-navbar uk-navbar-attached">
    
    <ul class="uk-navbar-nav">
        
        <li><a href="pens.php">Pen's</a></li>
        <li><a href="womens-watches.php">Women's Watches</a></li>
        <li><a href="mens-watches.php">Men's Watches</a></li>
        <li><a href="womens-accessories.php">Women's Accessories</a></li>
        <li><a href="mens-accessories.php">Men's Accessories</a></li>
        <li><a href="eyewear.php">Eyewear</a></li>
        <li><a href="">Women's Fragrance</a></li>
        <li><a href="">Men's Fragrance</a></li>
        <li><a href="">Cities</a></li>
        <li><a href="">Legal Statement</a></li>
    
    </ul>
    
</nav>    		
    		</div>
    		
    		<!-- This is the wrapper bottom menu end -->
    		
    	</div>
    	  	
    	<!-- This is the wrapper content end -->
       
    </div>
    
    <!-- This is the wrapper page end --> 
    	
	<!-- This is all scripts start --> 
	
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="js/uikit.min.js"></script>    
	<script src="js/foundation.min.js"></script>
	<script src="js/foundation.orbit.min.js"></script>
	
	<!-- This is all scripts end -->
	
	<!-- This is all caller scripts start --> 
	
	<script>
	   $(document).foundation();
	</script>
	
	<!-- This is all caller scripts end -->
                                         
    </body>
</html>

firefoxOribitLagslow

Hi,

I encounter a big issue on Firefox. I use Orbit slider with a huge number of image, with an average image weight of 200 ko, and when the page is displaying, without cache, Firefox stop displaying the page, go on, stop, go on...

The probleme is seen on labtop (and quite visible on my iMac). I checked with Firebug, and Firefox seems to wait for request access to server images. And when he waits, he stop and freeze the window.

Do you know how i can solde the issue ?

Thank you.

This is the webpage. http://ryan.adala.mansolutions.fr/mens-shoes.php

This my code

<!DOCTYPE html>
<html class="uk-height-1-1 uk-responsive-height">
 
    <head> 
    
        <title>Ryan Adala</title>
        <link rel="stylesheet" href="css/uikit.almost-flat.css" />
        <link rel="stylesheet" href="css/slides-mens-shoes.min.css" />
      
    </head>
               
    <body class="uk-height-1-1 uk-responsive-height">
    
    <!-- This is the animations start --> 
    
    <div class="container-animations uk-height-1-1" data-uk-scrollspy="{cls:'uk-animation-container-mens-shoes', delay:900}">
    
        <div class="first-animation-mens-shoes uk-height-1-1" data-uk-scrollspy="{cls:'uk-animation-mens-shoes-1', delay:900}"> 
    	
    	</div>
    	
    	<div class="second-animation-mens-shoes uk-height-1-1" data-uk-scrollspy="{cls:'uk-animation-mens-shoes-2', delay:6500}"> 
    	
    	</div>
    		
    </div>
 	
 	<!-- This is the animations end -->
    
    <!-- This is the wrapper page start --> 
    
    <div class="wrapper-page uk-height-1-1">
          
    	<!-- This is the wrapper content start --> 
    
    	<div class="wrapper-content uk-height-1-1">
    	  	
    		<!-- This is the wrapper top logo start -->
    	
    		<div class="wrapper-top-logo uk-width-1-1">
    		
    			<img src="images/top-logo.jpg" />
    		
    		</div>
    		
    		<!-- This is the wrapper top logo end -->
    		
    		<!-- This is the wrapper top menu start -->
    	
    		<div class="wrapper-top-menu uk-width-1-1">
    		
    			<nav class="uk-navbar uk-navbar-attached">
    
    <ul class="uk-navbar-nav">
        
        <li><a href="home.php">Home</a></li>
        <li><a href="limited-edition.php">Limited Edition</a></li>
        <li><a href="rayan-adala-interieur.php">Rayan Adala Interieur</a></li>
        <li><a href="rayan-adala-excellence-intro.php">Rayan Adala Excellence</a></li>
        <li><a href="womens-bag.php">Women's Bag</a></li>
        <li><a href="mens-bag.php">Men's Bag</a></li>
        <li><a href="womens-shoes.php">Women's Shoes</a></li>
        <li><a href="mens-shoes.php">Men's Shoes</a></li>
        <li><a href="">Contact</a></li>
    
    </ul>
    
</nav>    	    		
    		</div>
    		
    		<!-- This is the wrapper top menu end -->
    		
    		<!-- This is the container content start -->
    		
    		<div class="content-container uk-grid uk-height-1-1 uk-responsive-height" data-uk-scrollspy="{cls:'uk-animation-fade', delay:14500}"> 
    		
    			<!-- This is the container left column start -->
    		
    			<div class="uk-width-1-10 uk-height-1-1">
    			
    				<div class="mens-shoes-content-left-column uk-panel-box uk-height-1-1 uk-responsive-height">
    				
    					<div class="uk-width-1-1 uk-height-1-1 uk-vertical-align">
    					
    						<div class="left-column-link uk-panel-box uk-vertical-align-middle uk-width-1-1 uk-text-center">
    						
    							<a href="mens-shoes.php">Men's Shoes</a>
    						
    						</div>
    						
    					</div>
    				
    				</div>
    				
    			</div>
    			
    			<!-- This is the container left column end -->
    			
    			<!-- This is the container middle column start -->
    			
    			<div class="uk-width-8-10 uk-height-1-1">
    			
    				<div class="mens-shoes-content-middle-column uk-panel-box uk-height-1-1 uk-responsive-height">
    				
    					<span class="orbit-copyright">Property of Rayan Adala</span>
    				
    					<div class="orbit-image-set-container">
    				
    					</div>
    					<div class="preloader"></div>
    					<ul data-orbit>
    					  
    					  	<li><img class="slide-1" /></li>
    					  	<li><img class="slide-2" /></li>
    					  	<li><img class="slide-3" /></li>
    					  	<li><img class="slide-4" /></li>
    					  	<li><img class="slide-5" /></li>
    					  	<li><img class="slide-6" /></li>
    					  	<li><img class="slide-7" /></li>
    					  	<li><img class="slide-8" /></li>
    					  	<li><img class="slide-9" /></li>
    					  	<li><img class="slide-10" /></li>
    					  	<li><img class="slide-11" /></li>
    					  	<li><img class="slide-12" /></li>
    					  	<li><img class="slide-13" /></li>
    					  	<li><img class="slide-14" /></li>
    					  	<li><img class="slide-15" /></li>
    					  	<li><img class="slide-16" /></li>
    					  	<li><img class="slide-17" /></li>
    					  	<li><img class="slide-18" /></li>
    					  	<li><img class="slide-19" /></li>
    					  	<li><img class="slide-20" /></li>
    					  	<li><img class="slide-21" /></li>
    					  	<li><img class="slide-22" /></li>
    					  	<li><img class="slide-23" /></li>
    					  	<li><img class="slide-24" /></li>
    					  	<li><img class="slide-25" /></li>
    					  	<li><img class="slide-26" /></li>
    					  	<li><img class="slide-27" /></li>
    					  	<li><img class="slide-28" /></li>
    					  	<li><img class="slide-29" /></li>
    					  	<li><img class="slide-30" /></li>
    					  	<li><img class="slide-31" /></li>
    					  	<li><img class="slide-32" /></li>
    					  	<li><img class="slide-33" /></li>
    					  	<li><img class="slide-34" /></li>
    					  	<li><img class="slide-35" /></li>
    					  	<li><img class="slide-36" /></li>
    					  	<li><img class="slide-37" /></li>
    					  	<li><img class="slide-38" /></li>
    					  	<li><img class="slide-39" /></li>
    					  	<li><img class="slide-40" /></li>
    					  	<li><img class="slide-41" /></li>
    					  	<li><img class="slide-42" /></li>
    					  	<li><img class="slide-43" /></li>
    					  	<li><img class="slide-44" /></li>
    					  	<li><img class="slide-45" /></li>
    					  	<li><img class="slide-46" /></li>
    					  	<li><img class="slide-47" /></li>
    					  	<li><img class="slide-48" /></li>
    					  	<li><img class="slide-49" /></li>
    					  	<li><img class="slide-50" /></li>
    					  	<li><img class="slide-51" /></li>
    					  	<li><img class="slide-52" /></li>
    					  	<li><img class="slide-53" /></li>
    					  	<li><img class="slide-54" /></li>
    					  	<li><img class="slide-55" /></li>
    					  	<li><img class="slide-56" /></li>
    					  	<li><img class="slide-57" /></li>
    					  	<li><img class="slide-58" /></li>
    					  	<li><img class="slide-59" /></li>
    					  	<li><img class="slide-60" /></li>
    					  	<li><img class="slide-61" /></li>
    					  	<li><img class="slide-62" /></li>
    					  	<li><img class="slide-63" /></li>
    					  	<li><img class="slide-64" /></li>
    					  	<li><img class="slide-65" /></li>
    					  	<li><img class="slide-66" /></li>
    					  	<li><img class="slide-67" /></li>
    					  	<li><img class="slide-68" /></li>
    					  	<li><img class="slide-69" /></li>
    					  	<li><img class="slide-70" /></li>
    					  	<li><img class="slide-71" /></li>
    					  	<li><img class="slide-72" /></li>
    					  	<li><img class="slide-73" /></li>
    					  	<li><img class="slide-74" /></li>
    					  	<li><img class="slide-75" /></li>
    					  	<li><img class="slide-76" /></li>
    					  	<li><img class="slide-77" /></li>
    					  	<li><img class="slide-78" /></li>
    					  	<li><img class="slide-79" /></li>
    					  	<li><img class="slide-80" /></li>
    					  	<li><img class="slide-81" /></li>
    					  	<li><img class="slide-82" /></li>
    					  	<li><img class="slide-83" /></li>
    					  	<li><img class="slide-84" /></li>
    					  	<li><img class="slide-85" /></li>
    					  	<li><img class="slide-86" /></li>
    					  	<li><img class="slide-87" /></li>
    					  	<li><img class="slide-88" /></li>
    					  	<li><img class="slide-89" /></li>
    					  	<li><img class="slide-90" /></li>
    					  	<li><img class="slide-91" /></li>
    					  	<li><img class="slide-92" /></li>
    					  	<li><img class="slide-93" /></li>
    					  	<li><img class="slide-94" /></li>
    					  	<li><img class="slide-95" /></li>
    					  	<li><img class="slide-96" /></li>
    					  	<li><img class="slide-97" /></li>
    					  	<li><img class="slide-98" /></li>
    					  	<li><img class="slide-99" /></li>
    					  	<li><img class="slide-100" /></li>
    					  	<li><img class="slide-101" /></li>
    					  	<li><img class="slide-102" /></li>
    					  	<li><img class="slide-103" /></li>
    					  	<li><img class="slide-104" /></li>
    					  	<li><img class="slide-105" /></li>
    					  	<li><img class="slide-106" /></li>
    					  	<li><img class="slide-107" /></li>
    					  	<li><img class="slide-108" /></li>
    					  	<li><img class="slide-109" /></li>
    					  	<li><img class="slide-110" /></li>
    					  	<li><img class="slide-111" /></li>
    					  	<li><img class="slide-112" /></li>
    					  	<li><img class="slide-113" /></li>
    					  	<li><img class="slide-114" /></li>
    					  	<li><img class="slide-115" /></li>
    					  	<li><img class="slide-116" /></li>
    					  	<li><img class="slide-117" /></li>
    					  	<li><img class="slide-118" /></li>
    					  	<li><img class="slide-119" /></li>
    					  	<li><img class="slide-120" /></li>
    					  	<li><img class="slide-121" /></li>
    					  	<li><img class="slide-122" /></li>
    					  	<li><img class="slide-123" /></li>
    					  	<li><img class="slide-124" /></li>
    					  	<li><img class="slide-125" /></li>
    					  	<li><img class="slide-126" /></li>
    					  	<li><img class="slide-127" /></li>
    					  	<li><img class="slide-128" /></li>
    					  	<li><img class="slide-129" /></li>
    					  	<li><img class="slide-130" /></li>
    					  	<li><img class="slide-131" /></li>
    					  	<li><img class="slide-132" /></li>
    					  	<li><img class="slide-133" /></li>
    					  	<li><img class="slide-134" /></li>
    					  	<li><img class="slide-135" /></li>
    					  	<li><img class="slide-136" /></li>
    					  	<li><img class="slide-137" /></li>
    					  	<li><img class="slide-138" /></li>
    					  	<li><img class="slide-139" /></li>
    					  	<li><img class="slide-140" /></li>
    					  	<li><img class="slide-141" /></li>
    					  	<li><img class="slide-142" /></li>
    					  	<li><img class="slide-143" /></li>
    					  	<li><img class="slide-144" /></li>
    					  	<li><img class="slide-145" /></li>
    					  	<li><img class="slide-146" /></li>
    					  	<li><img class="slide-147" /></li>
    					  	<li><img class="slide-148" /></li>
    					  	<li><img class="slide-149" /></li>
    					  	<li><img class="slide-150" /></li>
    					  	<li><img class="slide-151" /></li>
    					  	<li><img class="slide-152" /></li>
    		
    					</ul>
    				
    				
    				</div>
    				
    			</div>
    			
    			<!-- This is the container middle column end -->
    			
    			<!-- This is the container right column start -->
    			
    			<div class="uk-width-1-10 uk-height-1-1 ">
    			
    				<div class="mens-shoes-content-right-column uk-panel-box uk-height-1-1 uk-responsive-height">
    				
    				
    				</div>
    				
    			</div>
    			
    			<!-- This is the container right column end -->
    			
    		</div>
    		
    		<!-- This is the container content end -->
    		
    		<!-- This is the wrapper bottom menu start -->
    		
    		<div class="wrapper-bottom-menu uk-width-1-1">
    		
    				<nav class="uk-navbar uk-navbar-attached">
    
    <ul class="uk-navbar-nav">
        
        <li><a href="pens.php">Pen's</a></li>
        <li><a href="womens-watches.php">Women's Watches</a></li>
        <li><a href="mens-watches.php">Men's Watches</a></li>
        <li><a href="womens-accessories.php">Women's Accessories</a></li>
        <li><a href="mens-accessories.php">Men's Accessories</a></li>
        <li><a href="eyewear.php">Eyewear</a></li>
        <li><a href="">Women's Fragrance</a></li>
        <li><a href="">Men's Fragrance</a></li>
        <li><a href="">Cities</a></li>
        <li><a href="">Legal Statement</a></li>
    
    </ul>
    
</nav>    		
    		</div>
    		
    		<!-- This is the wrapper bottom menu end -->
    		
    	</div>
    	  	
    	<!-- This is the wrapper content end -->
       
    </div>
    
    <!-- This is the wrapper page end --> 
    	
	<!-- This is all scripts start --> 
	
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="js/uikit.min.js"></script>    
	<script src="js/foundation.min.js"></script>
	<script src="js/foundation.orbit.min.js"></script>
	
	<!-- This is all scripts end -->
	
	<!-- This is all caller scripts start --> 
	
	<script>
	   $(document).foundation();
	</script>
	
	<!-- This is all caller scripts end -->
                                         
    </body>
</html>
Alexander Assimidis over 5 years ago

Did u tried to use inline-image($image, $mime-type) this will make it a little bit faster because there won't be that much HTTP Requests.

Cous over 5 years ago

Can i use it even if i use background-image css property ?

Alexander Assimidis over 5 years ago

Yea sure thats no problem that's just the compass property it would look like this inline

<img width="178" height="178" title="" alt="" src="data:image/jpeg;base64,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" />

for css u just write the same in ur
CSS
background-image: url('HERE');