проблема с JavaScript и возвращением значения

Question

function find_image_dm(imgsrc){
    window.imgwidth = ""; 
    var img = new Image();

    img.onload = function test() {
        var width = this.width;
        var height = this.height;

        if (height > 300) {
            var x = height/300;
            window.imgwidth = Math.ceil(width/x);
        }
    }

    img.src = imgsrc;

    return(window.imgwidth);
}

Я хочу вернуть window.imgwidth, чтобы я мог использовать его где-нибудь еще, но если я попытаюсь предупредить его или что-нибудь в этом роде, оно отобразится пустым. Как мне вернуть его значение. window.imgwidth - моя попытка создать глобальную переменную. Мне не нужна ширина окна

Answer 1

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

function find_image_dm(imgsrc, callback)
{
    var img = new Image();

    img.onload = function()
    {
        callback(this.width, this.height);
    };

    img.src = imgsrc;
}

Что бы вы использовали, как это:

function onReturnSize(w, h)
{
    console.log('image width is', w);
    console.log('image height is', h);
}

find_image_dm('http://placekitten.com/2200/1200', onReturnSize);

Демо: http://jsfiddle.net/mattball/pTKW4/

Answer 2

Хорошо ... Я просмотрел ваш код и обнаружил проблему с вашим скриптом.Вы используете функцию image.onload, поэтому, когда вы загружаете источник изображения, изображения загружаются, а затем только размерность доступна и сохраняется в window.imgwidth.

Все идет хорошо, но проблема в том, когда вы вызываете функциюДля загрузки образа u требуется время, поэтому, если вы попытаетесь получить window.imgwidth, так как ресурс все еще загружается, вы не получите window.imgwidth.Возвращаемое значение также не будет работать, так как коды не ждут, пока изображение загрузится, поэтому, хотя изображение загружается, выполнение блока кода будет завершено, поэтому у вас не будет никаких данных в window.imgwidth.

Если вы попытаетесь предупредитьwindow.imgwidth после определенной продолжительности, когда загрузка изображения завершена, тогда вы можете увидеть, что window.imgwidth имеет значение.А также у вас есть блок if, который хранит данные в window.imgwidth только тогда, когда высота больше 300, но у вас нет другого блока, поэтому вам необходимо реализовать его также в качестве запасного варианта :).

Дайте мне знатьесли бы я сказал это трудным способом :-D

Answer 3

Глядя на ваш код, кажется, что проблема в том, что вы технически не загружаете изображение, прежде чем пытаетесь получить высоту, потому что вы устанавливаете src после вызова onload.

Если вы используете jQuery, вы должны попытаться использовать его.

function find_image(imgsrc) {

    var imgWidth,
        img = $('<img/>').attr('src', imgsrc).load(function() {

        var $img = $(this),
            height = $img.height(),
            width = $img.width();

        if (height > 300) {
            var x = height/300;
            imgWidth = Math.ceil(width/x);
        }

    });

    return imgWidth;

}

Answer 4

Хорошо. Еще один удар по этому, @ Том.

Здесь могут быть две проблемы, насколько я вижу.

1. Не будет никакого вычисления window.imgwidth, если ваш , если оператор возвращает ложь, поскольку это, кажется, единственное место, где вы его вычисляете.

2. window.imgwidth вычисляется в function test(), но не возвращается.

Answer 5

ОК, попробуйте это.Вы должны вернуть значение window.imgwidth в функциональном тесте:

function find_image_dm(imgsrc){
    window.imgwidth = ""; 
    var img = new Image();
        img.onload = function test() {
        var width =this.width
        var height= this.height;
           if(height > 300){
               var x = height/300;
               console.log(Math.ceil(width/x));
               window.imgwidth = Math.ceil(width/x);
               console.log(window.imgwidth);
               alert (window.imgwidth);
               return window.imgwidth;
           }
        }

        img.src = imgsrc;
}

Answer 6

Я думаю, что проблема в том, что когда вы выполняете find_img_dm, вы пытаетесь немедленно вернуть значение ширины.Это не сработает, потому что img.onload, скорее всего, не будет запущен до завершения выполнения функции.

Что вам нужно сделать, это обработчик события onload, вызвать вызов другой функции, передать значение ширины и заставить эту функцию делать то, что вам нужно делать при загрузке изображения.Тогда вы будете знать, что в этот момент изображение загружается и значение ширины доступно.