Конфликт javascript или слишком много событий при наведении курсора мыши? - PullRequest
Новая
       21

Конфликт javascript или слишком много событий при наведении курсора мыши?

0 голосов
/ 25 апреля 2020

В настоящее время я разместил 4 изображения поверх фонового изображения. Когда ваша мышь наводит курсор на каждое изображение, оно исчезает, пока пользователь не обновится. Я хотел бы создать 26 клонов изображения. В идеале я мог бы расположить каждую копию изображения, и jquery будет автоматически генерировать имена идентификаторов, например, так (#myid (n)) aka # myid1, # ​​myid2. Поскольку я пока не могу вытащить клонирование этого изображения, мне приходится копировать и вставлять каждый блок кода снова и снова. Однако, как только я добавил свое шестое изображение, у меня возникли проблемы с производительностью, и мой код перестал работать.

Я включил два кодекса. Эта кодовая ручка работает с 4 копиями изображений: https://codepen.io/narutofan389/collab/NWGpQWo

Эта кодовая ручка не работает с 6 копиями: https://codepen.io/narutofan389/collab/MWapQyO

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

html

<body>
<div id="sand"></div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

javascript

$(document).ready(function(){

      for (var i = 0; i < 2; i++) {  
          var img = "<img src ='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4405662/sandsmaller.png' 
          id='myid"+i+"'/>"; 
          $("body #sand").append(img);
      }

})

Снова я пытаюсь сгенерировать другое идентификаторы, которые я могу расположить индивидуально?

1 Ответ

0 голосов
/ 25 апреля 2020

Поскольку ваш фрагмент клонирования находится в jQuery, я надеюсь, что решение, использующее его, является приемлемым.

Сначала я должен был добавить контейнер #sand, отсутствующий в вашей разметке, так как именно туда добавляется код изображения. Также добавили оболочку div к каждому изображению, чтобы отразить ваш код (хотя вам это может не понадобиться), и добавили класс sand к изображениям.

Затем вместо добавления события для каждого элемента Я использовал Делегирование событий , поэтому я могу прикрепить только один обработчик к элементу обтекания. Я нацеливаюсь на все изображения внутри контейнера #sand, которые еще не спрятаны .

А затем немного упростил css, удалив избыточные правила и перенеся общие свойства в новые классы. . 

for (let i = 1; i <= 6; i++) {
  // Create the wrapping div
  var $container = $("<div class='sand" + i + "'>");
  // Create the img
  var $img = $("<img src ='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4405662/sandsmaller.png' class='sand' id='sand" + i + "'/>");
  // Add image to container
  $container.append($img);
  // Add container to the document
  $("body #sand").append($container);
}

// Listen when the mouse hovers an image
$('#sand').on('mouseenter', 'img.sand:not(.hide)', function() {
  $(this).addClass('hide');
});

$('#sand').on('animationend', 'img.sand.hide', function() {
  $(this).hide();
});
html {
  background: url(https://i.postimg.cc/HWJvtDGx/lockcorrect.jpg) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

#bg {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}

#bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.sand {
  position: absolute;
  height: 90vh;
}

#sand6 {
  top: 0px;
  right: 200px;
}

#sand5 {
  top: 300px;
  left: 500px;
}

#sand4 {
  top: 300px;
  right: 200px;
}

.hide {
  animation: fade 3s;
  animation-fill-mode: forwards;
}

#sand3 {
  height: 100vh;
  top: 0px;
  left: 700px;
}

#sand2 {
  height: 100vh;
  top: 0px;
  left: 300px;
}

#sand1 {
  position: relative;
  height: 100vh;
  right: 30px;
}
<div id="bg">
  <img src="https://i.postimg.cc/HWJvtDGx/lockcorrect.jpg
" alt="lock">
</div>

<div id="sand">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...