Предварительная загрузка

356

19 февраля 2017, 11:22

На странице есть много картинок, и чтобы сделать предварительную загрузку не комильфо прогонять каждый путь через массив, ибо путей много и вручную делать долго. Как можно сделать по другому? Мой вариант будет правильным? При нажатии на маленькое изображение должно появляться большое без загрузки.

$('.wrapper img').each(function(){ 
var att =$(this).attr('src'); 
var qwe = /(\.\w{3,4}$)/; 
att=att.replace(qwe,'_q.jpg'); 
var newI= $('<img src="'+att+'">'); 
$(this).click(function(){  
$('.open').append('newI'); 
}); 
});

Answer 1

$('.open').append('newI');

newI должен быть именем переменной, а не строкой

$('.wrapper img').each(function(){ 
  var att =$(this).attr('src'); 
  var qwe = /\d+/; 
  att=att.replace(qwe, 250); 
  var newI= $('<img src="'+att+'">'); 
 
  $(this).click(function(){  
    $('.open').append(newI); 
  }); 
});

.open, .wrapper{display: inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div class="wrapper"> 
 <img src="http://placekitten.com/g/200/200"> 
</div> 
 
<div class="open"></div>

Answer 2

для открытия модального окна используйте библиотеку FancyBox3

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Пример работы библиотеки FancyBox 3</title>
<!-- Просьба! Дабы не нагружать slyfox.kz, при копировании примера
скачать оригинальный дистрибутив библиотеки http://fancyapps.com/fancybox/3/ -->
<link rel="stylesheet" href="//slyfox.kz/vendor/fancyBox-3.0/dist/jquery.fancybox.min.css">
<style>
  p {
    margin-bottom: 1rem;
  }
  img {
    display: block;
    float: left;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-right: 5px;
    cursor: pointer;
  }
</style>
</head>
<body>
<p><strong>Щелкни на картинку:</strong></p>
<div>
  <!-- для href ставим путь на большую картинку -->
  <a href="https://img1.goodfon.ru/original/1920x1080/c/bf/romby-uzory-cvety.jpg" data-fancybox="group" data-caption="Красивая текстура">
    <!-- для src ставим путь на уменьшенную копию -->
    <img src="https://img1.goodfon.ru/wallpaper/middle/c/bf/romby-uzory-cvety.jpg">
  </a>
  <a href="https://img1.goodfon.ru/original/1920x1080/4/d4/soedinennye-shtaty-vashington-3647.jpg" data-fancybox="group" data-caption="Ночной город">
    <img src="https://img1.goodfon.ru/wallpaper/middle/4/d4/soedinennye-shtaty-vashington-3647.jpg">
  </a>
  <a href="https://img2.goodfon.ru/original/1920x1080/2/9e/ch-b-komediya-aleksey-chadov.jpg" data-fancybox="group" data-caption="Алексей Чадов">
    <img src="https://img2.goodfon.ru/wallpaper/middle/2/9e/ch-b-komediya-aleksey-chadov.jpg">
  </a>
</div>
</body>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//slyfox.kz/vendor/fancyBox-3.0/dist/jquery.fancybox.min.js"></script>
</html>

Демонстрацию работы можно посмотреть тут https://codepen.io/lukas-pierce/pen/ZLNBmR