Undefined img, возвращаемый по таймеру функции

dixie motors спросил: 13 июня 2018 в 07:53 в: javascript

Я успешно обнаруживаю переопределение и добавление идентификатора к img без идентификатора с целью масштабирования при наведении со следующим, но после того, как таймер называется this строка кода возвращает что-то неопределенное. В этом и заключается проблема, эта строка кода возвращает неопределенные после запуска таймера, тогда масштаб больше не работает. Мне интересно, как нижеследующее ниже может повториться и работать с таймером, если изменяется img src. Он работает правильно в первый раз, а затем при обновлении его нет.

document.getElementsByClassName("ProductItem-gallery-slides-item-image")[0].id="xximage";

Эта функция выглядит так из учебника по масштабированию W3:

     function imageZoom(imgID, resultID) {
  var img, lens, result, cx, cy;
  img = document.getElementById(imgID);
 var picturea = document.getElementsByClassName("ProductItem-gallery-slides-item-image");
  // alert(picturea);
  result = document.getElementById(resultID);
  /*create lens:*/
  lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
  /*insert lens:*/
  img.parentElement.insertBefore(lens, img);
  /*calculate the ratio between result DIV and lens:*/
  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;
  /*set background properties for the result DIV*/
  result.style.backgroundImage = "url('" + img.src + "')";
  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
  /*execute a function when someone moves the cursor over the image, or the lens:*/
  lens.addEventListener("mousemove", moveLens);
  img.addEventListener("mousemove", moveLens);
  /*and also for touch screens:*/
  lens.addEventListener("touchmove", moveLens);
  img.addEventListener("touchmove", moveLens);
  function moveLens(e) {
    var pos, x, y;
    /*prevent any other actions that may occur when moving over the image*/
    e.preventDefault();
    /*get the cursor's x and y positions:*/
    pos = getCursorPos(e);
    /*calculate the position of the lens:*/
    x = pos.x - (lens.offsetWidth / 2);
    y = pos.y - (lens.offsetHeight / 2);
    /*prevent the lens from being positioned outside the image:*/
    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
    if (x < 0) {x = 0;}
    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
    if (y < 0) {y = 0;}
    /*set the position of the lens:*/
    lens.style.left = x + "px";
    lens.style.top = y + "px";
    /*display what the lens "sees":*/
    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*get the x and y positions of the image:*/
    a = img.getBoundingClientRect();
    /*calculate the cursor's x and y coordinates, relative to the image:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}

Вызов функции с помощью:

    imageZoom("xximage", "myresult");

Все помещается в таймер:

var myVar = setInterval(myTimer, 15000);
var set=0;
function myTimer() {CODE ABOVE INSIDE THIS }


1 ответ

SSpoke ответил: 13 июня 2018 в 08:41

нашел ваш пример на https://www.w3schools.com/howto/howto_js_image_zoom.asp

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

Я пробовал с таймером, и он работает одинаково без таймера без ошибок.

Замените эти две строки

 img = document.getElementById(imgID);
 var picturea = document.getElementsByClassName("ProductItem-gallery-slides-item-image");

на

 img = document.getElementsByClassName(imgID)[0];
 // alert(img);

Если вы хотите сохранить исходный код этого изображения

<img class="ProductItem-gallery-slides-item-image" data-load="false" data-src="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg" data-image="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg" data-image-dimensions="750x1124" data-image-focal-point="0.5,0.5" data-position-mode="standard" data-parent-ratio="0.7" alt="White" src="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg?format=500w" style="font-size: 0px; left: -0.312278px; top: 0px; width: 327.625px; height: 491px; position: relative;" id="yui_3_17_2_1_1530976058504_955" data-image-resolution="500w">

Имеет ли id id="yui_3_17_2_1_1530976058504_955"

var myVar = setInterval(myTimer, 1500);
var set=0;
function myTimer() {
  imageZoom("ProductItem-gallery-slides-item-image", "myresult");
}


function imageZoom(imgID, resultID) {
  var img, lens, result, cx, cy;
  img = document.getElementsByClassName(imgID)[0];
  result = document.getElementById(resultID);
  /*create lens:*/
  lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
  /*insert lens:*/
  img.parentElement.insertBefore(lens, img);
  /*calculate the ratio between result DIV and lens:*/
  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;
  /*set background properties for the result DIV*/
  result.style.backgroundImage = "url('" + img.src + "')";
  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
  /*execute a function when someone moves the cursor over the image, or the lens:*/
  lens.addEventListener("mousemove", moveLens);
  img.addEventListener("mousemove", moveLens);
  /*and also for touch screens:*/
  lens.addEventListener("touchmove", moveLens);
  img.addEventListener("touchmove", moveLens);
  function moveLens(e) {
    var pos, x, y;
    /*prevent any other actions that may occur when moving over the image*/
    e.preventDefault();
    /*get the cursor's x and y positions:*/
    pos = getCursorPos(e);
    /*calculate the position of the lens:*/
    x = pos.x - (lens.offsetWidth / 2);
    y = pos.y - (lens.offsetHeight / 2);
    /*prevent the lens from being positioned outside the image:*/
    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
    if (x < 0) {x = 0;}
    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
    if (y < 0) {y = 0;}
    /*set the position of the lens:*/
    lens.style.left = x + "px";
    lens.style.top = y + "px";
    /*display what the lens "sees":*/
    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*get the x and y positions of the image:*/
    a = img.getBoundingClientRect();
    /*calculate the cursor's x and y coordinates, relative to the image:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}
* {box-sizing: border-box;}

.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*set the size of the lens:*/
  width: 40px;
  height: 40px;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*set the size of the result div:*/
  width: 300px;
  height: 300px;
}
<img class="ProductItem-gallery-slides-item-image" data-load="false" data-src="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg" data-image="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg" data-image-dimensions="750x1124" data-image-focal-point="0.5,0.5" data-position-mode="standard" data-parent-ratio="0.7" alt="White" src="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg?format=500w" style="font-size: 0px; left: -0.312278px; top: 0px; width: 327.625px; height: 491px; position: relative;" id="yui_3_17_2_1_1530976058504_955" data-image-resolution="500w">

<div id="myresult" class="img-zoom-result"></div>
dixie motors ответил: 15 июня 2018 в 02:38
проблема возникает, когда ссылки нажимаются, она не обновляет dom или что-то
SSpoke ответил: 15 июня 2018 в 12:09
ссылки на сообщения больше кода

Дополнительное видео по вопросу: Undefined img, возвращаемый по таймеру функции

Уроки JavaScript | Урок №15 - Таймеры

JavaScript Решает. Прогресс бар и таймер

Учим Java Script 13. Слайдер по таймеру