Что делает этот простой javascript

#javascript

Вопрос:

Я читаю учебник и продолжаю застревать на первой строке кода, я знаю, что «новое» в php — это создание объекта, но этот учебник не имеет к этому никакого отношения. пожалуйста, помогите

   var img = new Image();

руководство здесь:

http://jqueryfordesigners.com/image-loading/

Хорошо, я нашел определение W3 для предопределенного объекта javascript Image ():http://www.w3schools.com/jsref/dom_obj_image.asp

1. Просто небольшое замечание, эта конкретная строка не имеет никакого отношения к jQuery вообще.

2. @BoltClock руководство написано на jQuery!! $(new Image()).attr("src", "image.png")

3. Я сказал «эта конкретная строка», а не «учебное пособие».

Ответ №1:

На самом деле, в JavaScript new также используется при создании объектов, как и в PHP.

Следовательно, как вы можете догадаться, эта строка кода просто создает экземпляр Image объекта и присваивает его img переменной.

1. Хорошо, это то, что я думаю, однако, в руководстве не определяется объект «Image»

2. @A_funs: Image — это встроенный DOM-класс, который представляет HTML-изображения, поэтому он доступен вам по умолчанию в большинстве, если не во всех браузерах.

3. Если вы используете Firefox и у вас установлен Firebug, вы можете после загрузки страницы ввести что-то вроде console.log (img) или console.log (Image), чтобы проверить что-либо. Это сказало бы вам, что img — это созданный экземпляр Image, и это изображение является функцией. Тогда вы бы знали, что Image является встроенной функцией, поскольку вы не определяли ее самостоятельно.

4. Хорошо, и эта предопределенная функция «Image» просто создает элемент html <image>?

Ответ №2:

это не имеет ничего общего с jQuery.

Image — это собственный объект JavaScript, который соответствует объекту HTML image.

что означает эта строка, так это «создайте новую переменную ‘img’ и установите ее на недавно инициализированный объект Image»

1. но в руководстве объект Image не определен

2. объект image создан. изначально с ним не связано никаких данных. обратите внимание, что руководство сначала прикрепляет событие «onload» к объекту image, а / затем / устанавливает атрибут «src». это приводит к созданию объекта, загрузке изображения, затем запуску события onload. если вы загрузили src / перед / установкой onload, то кэшированные изображения никогда не запускали бы свои события onload

3. в руководстве используется jQuery!!

4. да. но Image — это собственный JavaScript. и в примере кода, который вы предоставили в сообщении, в нем нет jQuery

Ответ №3:

вы можете предварительно загрузить изображение с помощью

   var img = new Image();

они предварительно загружают изображение images/headshot.jpg

затем они ждут, пока он не будет загружен

затем они скрывают загружаемое изображение и исчезают в изображении

Ответ №4:

Он создает HTML-форму для вас.

подробнее прочитайте это http://www.devguru.com/technologies/ecmascript/quickref/image.html

Надеюсь, это может вам очень помочь.

или вы хотите знать, как это создать

 var img = new Image();

и не использовать?

 $(img)
  // once the image has loaded, execute this code
  .load(function () {
    // set the image hidden by default    
    $(this).hide();

    // with the holding div #loader, apply:
    $('#loader')

    // remove the loading class (so no background spinner), 
    .removeClass('loading')
    // then insert our image
    .append(this);

    // fade our image in to create a nice effect
    $(this).fadeIn();
  })

    // if there was an error loading the image, react accordingly
   .error(function () {
   // notify the user that the image could not be loaded
   })

// *finally*, set the src attribute of the new image to our image
.attr('src', 'images/headshot.jpg');
});

Ключевое слово ‘this’ является represent для переменной img