2013-10-02 3 views
0

Я запускаю функцию в jQuery (document) .ready() и в jQuery (window) .load(). И те же функции. Предполагается запустить сценарий изменения размера изображения.jQuery не запускается при загрузке/готовность, когда реакция сервера медленная

Однако иногда, когда сервер не реагирует, сценарий не запускается вообще при загрузке страницы.

Я с этой проблемой на довольно долгое время, и, может быть, это перебор, но теперь, я вызываю функцию, как показано ниже, и в документе, готов и окна нагрузки:

jQuery('img', '.background').each(function(){ 
     jQuery(this).load(function(){ 
      jQuery(this).resizeImage(); 
     }); 
    }); 

функция вызывается является:

jQuery.fn.resizeImage = function() { 
console.log('fired'); 
var bgImg = jQuery(this); 

/* get img sizes */ 
var imgwidth = bgImg.width(); 
var imgheight = bgImg.height(); 

/* get window sizes */ 
var winwidth = jQuery(window).width(); 
var winheight = jQuery(window).height(); 
/* get the ratio, checks wether window is bigger or smaller than the image */ 
var widthratio = winwidth/imgwidth; 
var heightratio = winheight/imgheight; 
/* checks the difference */ 
var widthdiff = heightratio * imgwidth; 
var heightdiff = widthratio * imgheight; 
/* if you want the entire image to always fit the screen, change the > to < */ 
if(heightdiff>winheight) { 
    bgImg.css({ 
     width: winwidth+'px', 
     height: heightdiff+'px', 
     marginLeft: '-'+winwidth/2+'px' 
    }); 
} else { 
    bgImg.css({ 
     width: widthdiff+'px', 
     height: winheight+'px', 
     marginLeft: '-'+widthdiff/2+'px' 
    });  
} 
}; 

Используя console.log, я обнаружил, что функция не срабатывает вообще.

Может ли кто-нибудь указать мне в правильном направлении, почему это может не сработать?

+1

Сохраните сценарии в нижней части страницы. Чуть выше '' tag –

ответ

0

решаемых сам.

Проблема была в следующем:

jQuery(window).load(function(){ 
    jQuery('img', '.background').each(function(){ 
     jQuery(this).load(function(){ 
      jQuery(this).resizeImage(); 
     }); 
    }); 
}); 

Благодаря двойной нагрузки (Jquery (окно) .load и JQuery (это) .load) код не выполнять вообще. Поскольку, когда окно загружено, изображения уже загружены.

0

Угадайте вы промах с помощью this

jQuery('img', '.background').each(function(){ 
     var $self = $(this); 
     $self.load(function(){ 
      $self.resizeImage(); 
     }); 
    }); 
+0

Я пробовал это, но тогда код больше не работает. Я действительно не понимаю, почему это изменит ситуацию, поскольку единственная разница заключается в том, что вы храните jQuery (это) в переменной, где я просто использую ее сразу. –

Смежные вопросы