Question

当我悬停并离开.hover（）

时，我创建了一个片段，用于在源路径中没有下划线和'_1'之间交换图像

有时候我会看到一个问题，即我将鼠标悬停在下一张图片上的是'上一张图片中的'样式'图片，我用'_1'徘徊（这是不一致的！）？

我认为这与您将鼠标悬停在图像上的速度有关。

我使用$（this）来引用用户当前正在盘旋的div，也许它不一致地存储了img的src并过早地引用它了？

请在下面看一段展示我的问题的视频： http://screencast.com/t/lJEDb5lyTXj5

PS：我无法访问源代码 - 我将此代码注入到网站上，（所以我无法操纵没有JS的div / images）

<head>
<style>
.js div.result.product {
    display: none;
}
</style>
<script>
    $('html').addClass('js');

</script>
<script>

   $( document ).ready(function() {
        $('div.result.product').show();

    });

  </script>
</head>
<script> 

    console.log($('div.result-image').length);

  // Function to set all images with _1 to no "_1".
  $( "div.result-image > a > img" ).each(function() {
      console.log('one image');

    var styled = "_1";
    var revertStyledOriginal = $(this).attr('src');
    var preset = "?hei=245&qlt=85,1&wid=245&fmt=jpeg&resMode=bicub&op_sharpen=1";


    // if the img is silo
    var s = revertStyledOriginal;

    // Only takes everything up until the "_"
    unstyle = s.substring(0, s.indexOf('_'));


    // add the preset back onto the src to make the img crisp
    var unstyled = unstyle + preset;
    // sets this instance of the image in the each loop to the "new link" with removed "_1"  
    $(this).attr('src', unstyled);



});



 // Hover Function

    $('div.result.product').hover(function myfunc() {
        //Store 'this' as a reference to the current product image to be referred to when switching images
        var selection = $(this);


    $link = selection.find('img').attr('src');
    $parsed = $link;
    var styled = "_1";



    var revertStyledOriginal = selection.find('img').attr('src');
    var preset = "?hei=245&qlt=85,1&wid=245&fmt=jpeg&resMode=bicub&op_sharpen=1";


  //if the img is silo
  if(revertStyledOriginal.indexOf(styled) === -1 && ($link !== "http://www.kirklands.com/assets/HTML/MVS/AB_tests/NextPageButton/Next_Page_Buttons_Page_2.jpg")) 
  { 
  $preset = "?hei=245&qlt=85,1&wid=245&fmt=jpeg&resMode=bicub&op_sharpen=1";

    //Need to remove preset to add _1 (then readd preset).

    $removedPreset = $parsed.substring(0, $parsed.indexOf('?'));
    var Unstyled = $removedPreset + $preset;
    var Styled = $removedPreset + "_1" + $preset;


function checkImage(src) {
  var img = new Image();
  img.onload = function() {
    // code to set the src on success
        selection.find('img').attr('src', Styled)
     //console.log('exists');
     //console.log(revertStyledOriginal);

  };
  img.onerror = function() {
            selection.find('img').attr('src', Unstyled)
        console.log('doesnt exist');
        //console.log();

  };

  img.src = src; // fires off loading of image
}

checkImage(Styled);

}

//if the img is styled
else {}

//$( this ).attr("src",); 
},
//Function to reset the image on when you exit hover of img
function() {

        $original = $(this).find('img').attr('src')
        $removedPreset = $parsed.substring(0, $parsed.indexOf('?'));
        $link = $removedPreset + $preset;

        if ($original !== "http://www.kirklands.com/assets/HTML/MVS/AB_tests/NextPageButton/Next_Page_Buttons_Page_2.jpg")  {
    // set on hover image src to silo
    $(this).find('img').attr('src', $link)
        }
});



</script>

悬停时的图像交换

0 个答案: