Css swap image без JS

Question

Я работаю над веб-сайтом ресторана, и я пытаюсь показать что-то новое для отображения меню. Я использую hover для отображения большего изображения при наведении указателя мыши на миниатюру. Я доволен макетом и функциональностью, но меня беспокоит время загрузки, когда все пункты меню вверх.

Проблема, которую я вижу, заключается в том, что все фотографии загружаются, когда страница загружается и просто делается невидимой, пока вы не наведете миниатюру. Я не хочу использовать JS, потому что мне не нужны реальные всплывающие окна, которые можно заблокировать.

Есть ли другой способ получить тот же эффект с помощью puse css?

Страница здесь http://www.thejunctioncafe-paphos.com/menu_junction_cafe.html

CSS-

ul.enlarge{ 
list-style-type:none; 
margin-left:0px; 
width: 700px; 
margin:auto; 



} 
ul.enlarge li{ 
display:inline-block; 
position: relative; 
z-index: 0;/
margin:10px 10px 0 10px; 
} 

ul.enlarge img{ 
background-color:#eae9d4; 
padding: 6px; 
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75); 
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75); 
box-shadow: 0 0 6px rgba(132, 132, 132, .75); 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
} 
ul.enlarge span{ 
position:absolute; 
left: -3999px; 
background-color:#eae9d4; 
padding: 10px; 
font-family: 'Calibri', sans-serif; 
font-size:.9em; 
text-align: center; 
color: #000; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75)); 
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75); 
box-shadow: 0 0 20px rgba(0,0,0, .75); 
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius:8px; 
} 
ul.enlarge li:hover{ 
z-index: 50; 
cursor:pointer; 
} 
ul.enlarge span img{ 
padding:2px; 
background:#ccc; 
} 
ul.enlarge li:hover span{ 
top: -350px; /*the distance from the bottom of the thumbnail to the top of the popup image*/ 
left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/ 
} 
ul.enlarge li:hover:nth-child(2) span{ 
left: -100px; 
} 
ul.enlarge li:hover:nth-child(3) span{ 
left: -200px; 
} 
ul.enlarge img, ul.enlarge span{ 
behavior: url(scripts/PIE.htc); 
} 

Answer 1

Всплывающие блокируются при использовании JavaScript для создания всплывающих окон, не загружать изображения. Поэтому просто загрузите изображения с помощью javascript после завершения страницы. Затем пусть ваши изображения всплывают, как вы их сейчас.

Если вы хотите сделать это еще лучше, загрузите изображение, когда пользователь будет навис над миниатюрой в предварительном предположении, что он нажмет на него.

Answer 2

Я предлагаю вам оставить его так, как у вас есть, потому что, насколько я вижу, это небольшие изображения и не повлияют на время загрузки.

но с только CSS вы могли бы сделать что-то вроде этого:

.menu-item:hover .more { 
 
display:block; 
 
background:url("http://www.thejunctioncafe-paphos.com/images/Breakfast-Roll.png") no-repeat scroll left top; 
 
    position:absolute; 
 
    height:100%; 
 
    width:100%; 
 
    top:0%; 
 
} 
 

 
.more { 
 
    display:none; 
 

 
} 
 
.menu-item { 
 
    width:200px; 
 
    height:200px; 
 
    }

<div class="menu-item"> 
 
<img src="http://www.thejunctioncafe-paphos.com/images/Breakfast-Roll_th.png" width="100" height="67" alt="Breakfast Roll"> 
 
<span class="more">MORE TEXT</span> 
 
</div>

таким образом большое изображение загружается только после :hover события на .menu-item и вы можете стилизовать как вы хотите. но вам нужно будет написать css (background-image) для всех .menu-items