Проблема с загрузкой JQuery при первой загрузке/жестком обновлении
Вопрос
всем привет, вот сайт СМОТРИТЕ НИЖЕ
У меня небольшая проблема с jquery, и я не могу понять, как ее отладить.
полоса миниатюр должна прокручиваться при наведении на нее курсора.Когда страница загружается или загружается при принудительном обновлении, они не прокручиваются.
Если я обновляю страницу (обычно не принудительное обновление), все работает нормально.
Есть идеи?
----------------ОБНОВЛЯТЬ-------------------
Вот чистая версия без какого-либо другого кода:
Вот код 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);
});
});
Решение
Возможно, если бы вы могли опубликовать код, это было бы проще, чем просматривать страницу для точного включения, о котором вы говорите...
В любом случае, я делать ставку вы не включаете свои методы инициализации, какими они должны быть, чтобы гарантировать полную загрузку DOM:
$(function (){
// Put everything you want to run on page load here, to ensure it's
// only run when the DOM has loaded entirely.
});
Другие советы
У меня была очень похожая проблема.
Я также попробовал изменить document.ready() на window.load(), но это не решило мою проблему.
После долгих исследований и разработок я обнаружил, что причиной этой проблемы являются размеры изображений.Моим требованием были изображения размером 400 * 400 пикселей, но я использовал огромные изображения, например.некоторые изображения были выше 1080p.
Когда я изменил размер своих изображений и повторно загрузил их...это сработало.
Я думаю, это потому, что вы используете height()
или аналогичные методы позиционирования перед загрузкой изображений.
Однако, не видя исходного кода, я не могу сказать наверняка.