jquery 3.3.1 Uncaught TypeError: e.indexOf не является функцией на w.fn.init.w.fn.load

Question

<img class="my-foto" src="fashion-033-thumb.jpg" data-large="fashion-033.jpg">

<!-- Optional JavaScript -->
<!-- <script src="jquery-1.8.2.min.js"></script> -->
<script src="jquery-3.3.1.min.js"></script>
<script src="zoomsl-3.0.js"></script>
<script>
  $(function() {
    $('.my-foto').imagezoomsl({ 
      zoomrange: [3, 3] 
    });  
  });
</script>

zoomsl не работает с JQuery 3.3.1 версии консольного броска e.indexOf не является ошибкой функции

Answer 1

Также вы можете изменить код следующим образом

До:

$.fn.imagezoomsl = function(options){
    options = options || {};        
    return this.each(function(){ //return jQuery obj        
        if (!$(this).is("img")) return true;            
        var that = this;
        setTimeout(function () {
            $(new Image()).load(function(){
                sergelandimagezoomer.init($(that), options);                    
            }).attr('src', $(that).attr('src'));                
        }, 30);
    });

};

После:

$.fn.imagezoomsl = function(options){
    options = options || {};        
    return this.each(function(){ //return jQuery obj        
        if (!$(this).is("img")) return true;            
        var that = this;
        var img = new Image();
        setTimeout(function () {
            $(img).load($(that).attr('src'),function(){
                sergelandimagezoomer.init($(that), options);                    
            }).attr('src', $(that).attr('src'));                
        }, 30);
    });

};

Answer 2

Проблема: zoomsl не работает с версией jquery 3.3.1

Ошибка:

Решение:

• Вам необходимо изменить new Image() .load() функцию в zoomsl-3.0.js

• Применить $("img").one("load", function() { ... } там

• Пожалуйста, отметьте codepen пример здесь

Старый код:

$.fn.imagezoomsl = function(options){
    options = options || {};        
    return this.each(function(){        
        if (!$(this).is("img")) return true;            
        var that = this;            
        setTimeout(function () {
            $(new Image()).load(function(){//this is old line
                sergelandimagezoomer.init($(that), options);
            }).attr('src', $(that).attr('src'));                
        }, 30);
    });
};

Новый код:

$.fn.imagezoomsl = function(options){
    options = options || {};        
    return this.each(function(){
        if (!$(this).is("img")) return true;            
        var that = this;            
        setTimeout(function () {
            $("img").one("load", function() {//new code
                sergelandimagezoomer.init($(that), options);
            }).attr('src', $(that).attr('src'));                
        }, 30);
    });
};

Вы можете видеть, что $("img").one("load", function() { ... } применяется в функции setTimeout.

Просто измените эту строку, и она начнет работать.

Это изменение будет работать и в более старых версиях jquery.

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