Jquery Carregando problema em primeira carga / atualização forçada
Pergunta
Olá a todos, aqui é o local veja abaixo
Eu tenho um pequeno problema jquery e eu não consigo descobrir como depurá-lo.
a tira de miniaturas é suposto para rolar quando você passa o mouse sobre ele. Quando a página é carregada, ou cargas sobre a atualização forçada, eles não rolagem.
Se eu atualizar a página (normalmente, não uma atualização forçada), ele funciona bem.
Todas as idéias?
---------------- ATUALIZAÇÃO -------------------
Aqui está uma versão limpa com nenhum outro código na maneira:
E aqui está o JS código que estou usando para produzir o pergaminho
Veja a segunda metade para o código que faz com que rolar.
$(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);
});
});
Solução
Talvez se você pudesse postar o código que seria mais fácil do que navegar na página para o exato incluem você está se referindo ...
De qualquer forma, eu aposta ??em> você não está colocando seus métodos de inicialização como eles devem ser para garantir o DOM é totalmente carregada:
$(function (){
// Put everything you want to run on page load here, to ensure it's
// only run when the DOM has loaded entirely.
});
Outras dicas
Eu tive um problema muito semelhante.
Eu também tentei mudar document.ready () para window.load (), mas não resolver o meu problema.
Depois de muita lotes de R & D, descobri que os tamanhos de imagem estavam causando este problema. minha exigência era de 400 * 400 px imagens, mas eu estava usando imagens enormes por exemplo algumas imagens foram acima de 1080p.
Quando eu re-dimensionados minhas imagens e imagens thoses enviados por re ... funcionou.
Eu acho que é porque você está usando height()
ou métodos posição similar antes da carga imagens.
No entanto, sem ver o código fonte não posso dizer com certeza.