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.loadjquery 3.3.1 Uncaught TypeError: e.indexOf is not a function at w.fn.init.w.fn.load
【发布时间】：2019-03-03 08:48:49
【问题描述】：

<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 is not a function 错误

【问题讨论】：

根据您应该使用的文档：jQuery(function() 请确保 jquery 正在加载检查是否有来自带有检查器的开发工具的错误。
Sigma 的评论根本没有帮助...... w.fn.init.w.fn.load 是一个 jQuery 函数，这意味着 JQuery 代码实际上已被加载并执行。此外，问题本身的标题是 devtools 的 javascript 输出

标签： jquery image zooming jquery-3

【解决方案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);
    });

};

【讨论】：

【解决方案2】：

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

错误：

解决方案：

需要在zoomsl-3.0.js中修改new Image().load()函数

在那里申请$("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 旧版本中继续工作。

希望您找到了解决方案，请随意填写问题。

【讨论】：