jQuery on load event не запускает скрипт

Question

Сначала я смотрел на событие onLoad, но потом, когда я прочитал об этом, я обнаружил, что я был или устарел, поэтому я искал и нашел эту информацию для использования on чтобы проверить, загружено ли изображение: load() method deprecated?

Но простая анимация, которую я запускаю, не будет работать. Элемент не отображается. Он работает, если я перезагружаю браузер. Анимация работала идеально, пока я не добавил событие загрузки. Что может быть неправильным и как я могу улучшить код, чтобы работать лучше?

$("#intro-img").on("load", function() { 

    $(".intro-content").animate({ 
    left: '20px', 
    opacity: '1.0' 
    }); 

}); 

EDIT: Скрипт работает в настоящее время после того как я использовал window вместо идентификатора. Как и этот $(window).on("load", function() {.... Теперь скрипт должен запускаться, когда загружен весь контент на странице? Но я думаю, что никогда не будет гарантии, что он будет работать на 100% с изображениями !?

Answer 1

С $ (window) .load вы должны ждать, чтобы загрузить все ресурсы в Интернете для выполнения скрипта. Вы можете сделать кросс-браузер событий загрузки изображений. Смотрите это:

JavaScript/jQuery event listener on image load for all browsers

Вместо кода

$('image').on('load') 

Вы можете использовать

$('image').load() 

Или крепящие события с EventListener.

Успехов

Answer 2

$('#book').on("load",function(){ 
    //animate 
}); 

Проблема с этим подходом, когда изображение загружается из события загрузки кэша имеет возможность того, что она никогда не triggered.When изображения сначала скачал JQuery может иметь возможность присоединять событие, прежде чем изображение загружается и ожидается работа. Но если изображение загружается так быстро через кеш, то jquery может и не быть.

$('#book').on("load",function(){ 
    $(".intro-content").animate({ 
    left: '20px', 
    opacity: '0.5', 
    height:"300px" 
    }); 
}).each(function(){ 
    if(this.complete) { 
    $(this).trigger('load'); 
    } 
}); 

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

Answer 3

Вы пытались использовать альтернативную функцию JQuery $(document).ready()?

$(document).ready(function() { 
    $(".intro-content").animate({ 
     left: '20px', 
     opacity: '1.0' 
    }); 
    });