<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不是函数错误
问题: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旧版本中运行。
我希望你找到解决方案,请随意提问。
您也可以像这样更改代码
之前:
$.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);
});
};