Пользовательский объект JavaScript и загрузка изображения - PullRequest
Новая
       27

Пользовательский объект JavaScript и загрузка изображения

1 голос
/ 01 февраля 2012

У меня проблемы с загрузкой изображений и запуском с сафари / мобильным сафари.У меня есть пользовательский объект, который рисует на холсте, но должен ждать, пока не загрузится свойство изображения объекта, потому что он использует размеры изображения при рисовании.приведенный ниже код отлично работает на ff, но в safari не работает: 

function canvasSlider(){
    this.slideImg=new Image();
    this.slideImg.src="images/back_button.png";
    this.somevalue=55;
}
canvasSlider.prototype.init = function (){
    alert(this.slideImg.complete + ', ' + this.slideImg.height+', ' + this.somevalue);
}
var myObj = new canvasSlider();
myObj.init();

в safari, это всегда будет возвращать false для this.slideImg.complete

Как я могу использовать this.slideImg.onload =SomeFunction ();и всегда проверять, передан ли объект canvasSlider? 

function canvasSlider(){
this.slideImg=new Image();
this.slideImg.onload=somefunction(this);
this.slideImg.src="images/back_button.png";
this.somevalue=55;
}
function somefunction(obj){
alert(obj.slideImg.complete+', '+obj.slideImg.src);
}
var myObj = new canvasSlider()

это не работает.есть идеи?Спасибо

1 Ответ

3 голосов
/ 01 февраля 2012

Изображения загружаются асинхронно, поэтому вам нужно запустить операцию рисования, когда изображение успешно загружено.Вы были на правильном пути с нагрузкой.Вы можете сделать это следующим образом: 

function canvasSlider(readyFunc){
    var self = this;
    this.slideImg=new Image();
    this.slideImg.onload = function() {
        self.init();
        if (readyFunc) {
            readyFunc.call(self);
        }
    };
    this.somevalue=55;
    // The last thing you should do in the constructor is set the .src value
    // That's because if the image is in the cache, some browsers will trigger
    // onload immediately when you set .src and we want the canvasSlider object 
    // to be fully formed when init() and readyFunc() are called.
    this.slideImg.src="images/back_button.png";
}
canvasSlider.prototype.init = function (){
    alert(this.slideImg.complete + ', ' + this.slideImg.height+', ' + this.somevalue);
}
var myObj = new canvasSlider(function() {
    // The slider is ready with the image loaded here 
    // and .init() has already been called.
    // "this" right here is the canvasSlider object
    // you can do anything else you wanted to do once the image was loaded
});
// The image is not necessarily loaded here.  
// You have to put anything that relies on the image being loaded in the 
// above callback to assure it is not executed until the image is loaded.

Примечание: при тестировании вашего кода некоторые браузеры немедленно запускают загрузку, если изображение находится в кэше браузера.Необходимо проверить оба способа (с изображением в кэше браузера и без изображения в кэше браузера), чтобы убедиться, что оба случая работают правильно.Разработчики часто думают, что все работает нормально (потому что изображение находится в кэше их браузера), а затем оно не работает для следующего пользователя, который его пробует.

...