ajax 呼び出しが .loadUrl() された後、div (this.elmWheel) を非表示にする必要があります。
このコードを使用すると、div を非表示にできません。ここで何が間違っていますか?私はjquery 1.4.2を使用しています
var Viewer = function(url) {
var scope = this;
this.elm = '#viewer';
this.elmWheel = '#loader-wheel';
this.url = url;
this.init = function() {
this.loadWheelInit();
this.loadUrl();
};
this.loadWheelInit = function() {
$('<div id="' + scope.elmWheel + '">Loading ...</div>').appendTo(this.elm);
};
this.loadWheelHide = function() {
$(this.elmWheel).hide();
console.log('hide');
};
this.loadUrl = function() {
// simulate loading
setTimeout(function() {
// fetch img from api
$.get(this.url, function(data) {
scope.loadWheelHide();
console.log('show image');
// add img to the dom
var img = $('<img id="img">');
img.attr('src', this.url);
img.appendTo(scope.elm);
});
}, 2000);
};
};
<div id="viewer" class="">
</div>
このコードでインスタンスを作成しています。Loadind ホイールが正しく追加されていますが、非表示にすることはできません。
var viewer = new Viewer('img/1.jpg');
viewer.init();