Форум

raindew · #1 (**permalink**) 17.09.2016, 10:50

Здравствуйте. Подскажите, пожалуйста, каким образом нужно изменить скрипт, чтобы можно было работать с условием "если то" для следующей функции:
-- Jquery --

$(document).ready(function(){
  $('.photo li').waitForImages(function() { // Функция, которая следит, загрузилась ли картинка.
    if($(this)){
      $(this).show(); // если картинка найдена, показываем элемент с картинкой.
    }else{
      $(this).remove(); // если нет, удаляем элемент.
    }
  });
});

-- CSS --

.photo:nth-child(1) li:nth-child(1) {background: url("../img/cake.jpg") no-repeat;} - такая картинка есть.
.photo:nth-child(2) li:nth-child(1) {background: url("../img/caked.jpg") no-repeat;} - такой нет.
.photo:nth-child(3) li:nth-child(1) {background: url("../img/cakef.jpg") no-repeat;} - такой нет.
.photo li {
  display: inline-block;
  border: 1px solid black;
  width: 270px;
  height: 200px;
}

-- HTML --

<ul class="photo">
  <li></li>
</ul>
<ul class="photo">
  <li></li>
</ul>
<ul class="photo">
  <li></li>
</ul>

рони · #2 (**permalink**) 17.09.2016, 12:09

raindew,
не могли бы вы сделать макет полностью

рони · #3 (**permalink**) 17.09.2016, 15:54

raindew,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.photo:nth-child(1) li:nth-child(1) {background: url("http://i.playground.ru/i/73/56/40/00/pix/image.jpg") no-repeat; background-size: cover;}
.photo:nth-child(2) li:nth-child(1) {background: url("../img/caked.jpg") no-repeat;}
.photo:nth-child(3) li:nth-child(1) {background: url("../img/cakef.jpg") no-repeat;}
.photo li {
  display: inline-block;
  border: 1px solid black;
  width: 270px;
  height: 200px;
  opacity: 0;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.waitforimages/1.5.0/jquery.waitforimages.min.js"></script>
  <script>
$(function() {
    $('.photo li').waitForImages({
        waitForAll: true,
        each: function(loaded, count, success) {
            success ? $(this).fadeTo(500, 1) : $(this).remove()
        }
    });
});
  </script>
</head>

<body>
<ul class="photo">
  <li></li>
</ul>
<ul class="photo">
  <li></li>
</ul>
<ul class="photo">
  <li></li>
</ul>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript