jquery - jquery 3.3.1 Uncaught TypeError: e.indexOf is not a function at 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 版本控制台 throw e.indexOf is not a function 错误

Answer 1

问题：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 旧版本中继续工作。

我希望您找到了解决方案，请填写免费提问。

Answer 2

您也可以像这样更改代码

前：

$.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);
    });

};