Проблема загрузки Jquery при первой загрузке / жестком обновлении - PullRequest
Новая
       21

Проблема загрузки Jquery при первой загрузке / жестком обновлении

0 голосов
/ 28 октября 2009

Привет всем, вот сайт СМОТРЕТЬ НИЖЕ

У меня небольшая проблема с jquery, и я не могу понять, как ее отладить.

полоса миниатюр должна прокручиваться при наведении на нее курсора. Когда страница загружается или загружается при жестком обновлении, они не прокручиваются.

Если я обновляю страницу (обычно это не жесткое обновление), она работает нормально.

Есть идеи?

---------------- UPDATE -------------------

Вот чистая версия без другого кода:

Ссылка здесь

А вот код JS, который я использую для создания свитка

См. Вторую половину кода, который заставляет его прокручиваться. 

   $(document).ready(function() {
    $('#slideshow').cycle({
  fx:     'fade', 
    next:   '#next', 
 pause: 1,
    prev:   '#prev',
 pause: '#pause',
 pager:  '.thumbs',
 pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();},
 pagerAnchorBuilder: function(idx, slide) {
                        var src = $('img',slide).attr('src');
      //Change height of thumbnail here
                         return '<li><a href="#"><img src="' + slide.src + '" width="75" /></a></li>'; 
     //  return '<li><a href="#"><img src="' + src + '"  height="90" /></a></li>'; 
                } 
 });
$(function() {
    //Pause slideshow on page load
    $("#slideshow").cycle('pause');

});


 //Get our elements for faster access and set overlay width
 var div = $('div.sc_menu'),
  ul = $('ul.sc_menu'),
  ulPadding = 15;
 //Get menu width
 var divWidth = div.width();
 //Remove scrollbars 
 div.css({overflow: 'hidden'});
 //Find last image container
 var lastLi = ul.find('li:last-child');
 //When user move mouse over menu
 div.mousemove(function(e){
  //As images are loaded ul width increases,
  //so we recalculate it each time
  var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; 
  var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
  div.scrollLeft(left);
 });
});

Ответы [ 3 ]

1 голос
/ 13 мая 2016

У меня была очень похожая проблема.

Я также попытался изменить document.ready () на window.load (), но не решил мою проблему.

После большого количества исследований и разработок я обнаружил, что причиной проблемы являются размеры изображений. мое требование было 400 * 400 пикселей изображения, но я использовал огромные изображения, например. некоторые изображения были выше 1080p.

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

0 голосов
/ 28 октября 2009

Возможно, если бы вы могли опубликовать код, это было бы проще, чем просмотреть страницу, чтобы точно узнать, на что вы ссылаетесь ...

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

$(function (){
  // Put everything you want to run on page load here, to ensure it's
  // only run when the DOM has loaded entirely.
});
0 голосов
/ 28 октября 2009

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

Однако, не видя исходного кода, точно сказать не могу.

...