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 版本控制台抛出 e.indexOf 不是函数错误

Answer 1

问题：zoomsl 不适用于 jquery 3.3.1 版本

错误：

Solution :

You need to change new Image() .load() function in zoomsl-3.0.js

Apply $("img").one("load", function() { ... } there

Please check codepen example here

旧代码：

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

可以看到在setTimeout函数中应用了$("img").one("load", function() { ... }。

只需更改此行，它就会开始工作。

此更改也将在 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);
    });

};

jquery 3.3.1 Uncaught TypeError: e.indexOf is not a function at w.fn.init.w.fn.load

jquery 3.3.1 Uncaught TypeError: e.indexOf is not a function at w.fn.init.w.fn.load

jquery

image

zooming

jquery-3