Функция JQuery не срабатывает при начальной загрузке

Question

У меня есть ситуация, когда я должен ждать Конкретное изображение для загрузки, а затем либо поменять его src, либо найти следующее изображение и скрыть/показать его.

Что мне нужно, чтобы показать изображение-заполнитель (силуэт), пока его основное изображение не будет готово, а затем спрятать силуэт и показать основное изображение. Очень распространенный материал.

Проблема в том, что эта функция jquery не запускается на новой вкладке или окне ... но если я нажму f5, она отлично работает ... но затем снова открою новую вкладку, и она не будет стрелять, пока я не ударил f5 ,

CSS: 
.staffImage1, .staffImage2, .staffImage3, .staffImage4, .staffImage5 { display: none; } 

Jquery: 
$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5') 
    .load(function() { 
     $(this).next('.sillhouette').hide(); 
     $(this).show(); 
     console.log("function fired") 
    }) 

Я получаю сообщение журнала только после обновления.

Что-то нужно знать о том, что я использую метод «Первый 14k» для увеличения скорости страницы, поэтому, возможно, jquery просто не готов, когда изображения загружаются в первый раз, но кэшируются и работают после f5?

Каждый образ должен дождаться его полной загрузки, они находятся в слайдере, поэтому мне нужно показать первое изображение слайдов, как только оно будет готово, я не могу дождаться, пока все 5 изображений будут готовы, так как это замедлит работу вниз по первому слайду.

Любые советы оценили, спасибо

Answer 1

Эта структура:

$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5').load(...) 

не работает, чтобы уведомить вас, когда все изображения были загружены. .load() работает только на одном изображении за раз. И, если изображения будут кэшироваться, они, возможно, уже закончили загрузку, прежде чем ваш jQuery даже запустится, чтобы вы полностью пропустили событие загрузки.

Простейшие Обходной использовать событие окна загрузки, когда все ресурсы страницы завершения загрузки:

$(window).load(function() { 
    // all images are loaded here 
}); 

Это также возможно контролировать только те 5 изображений, но это больше работы. Я написал код, чтобы сделать это раньше, поэтому я посмотрю, смогу ли я найти этот предыдущий код.

---

Здесь представлена ​​функция плагина jQuery, которая контролирует только определенные изображения. Он будет называть его обратного вызова, когда все изображения в объекте JQuery загружаются:

// call the callback when all images have been loaded 
// if all images are already loaded or there were no images in the jQuery 
// object, then the callback will be called immediately 
jQuery.fn.imgsLoaded = function(fn) { 
    var cntRemaining = 0; 
    function checkDone() { 
     if (cntRemaining === 0) { 
      fn(); 
     } 
    } 

    function imgDone() { 
     --cntRemaining; 
     checkDone(); 
     // remove event handlers to kill closure when done 
     $(this).off("load error abort", imgDone); 
    } 

    this.each(function() { 
     if (!this.tagName.toLowerCase() === "img" && !this.complete && this.src) { 
      ++cntRemaining; 
      $(this).on("load error abort", imgDone); 
     } 
    }); 
    checkDone(); 
    return this; 
} 

Вы могли бы использовать его как это:

$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5').imgsLoaded(function() { 
    $(this).next('.sillhouette').hide(); 
    $(this).show(); 
    console.log("function fired") 
}); 

Работа демо: http://jsfiddle.net/jfriend00/zaoweyoo/

Answer 2

Написать код JQuery ' $ (document) .ready (function() { // ваш код }); '