2
내 jQuery Cycle2 슬라이드 쇼에서 무슨 일이 일어나는지 알아 내려고합니다 ... 문제는 Windows 7 및 FireFox 조합에있는 것처럼 보입니다. 아무 문제없이 문제를 재현 할 수 없었습니다. 다른 시나리오.Cycle2 및 Firefox 이미지 깜박임
이미지는 모두로드가 잘되지만 이미지가로드 된 후에도 이미지간에 전환이 발생해도 이미지의 일부가로드되고 나머지는 1 초 후에로드됩니다. 그것은 설명하기 조금 어려운, 그래서 도움이되는 동영상을 업로드했습니다 https://www.youtube.com/watch?v=euttwaR4iKk
을 여기 내 HTML의 첫 번째 비트입니다 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Holland Engineering</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
<link href="css/style.css" media="screen" rel="stylesheet" type='text/css' />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/cycle.js"></script>
<script type="text/javascript" src="js/caption2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 360,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'fadein',
closeEffect : 'fadein'
});
});
</script>
<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/logo.png" alt="Holland Engineering" /></div>
<div id="logovert"><img src="images/logovert.png" alt="" /></div>
<div id="nav">
<ul id="menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">Who We Are</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="casestudies.html">Case Studies</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
<div class="clearall"></div>
<div id="banner" class="cycle-slideshow" data-cycle-speed=1400 data-cycle-auto-height=1200:500 data-cycle-caption-plugin=caption2>
<div class="cycle-overlay"></div>
<img src="images/home/slide1.jpg" data-cycle-desc=" Lago Del Pino in Tyler, TX" alt="" />
<img src="images/home/slide2.jpg" data-cycle-desc=" Wood County Electric Cooperative in Quitman, TX" alt="" />
<img src="images/home/slide3.jpg" data-cycle-desc=" Racquet & Jog in Tyler, TX" alt="" />
<img src="images/home/slide4.jpg" data-cycle-desc=" Centene in Tyler, TX" alt="" />
<img src="images/home/slide5.jpg" data-cycle-desc=" Lindale ISD Performing Arts Center in Tyler, TX, Images courtesy of Alan Roberts, AIA" alt="" />
</div>
그리고 유일한 기타 관련 코드가 CSS의 이러한 몇 블록 거리가 :
#banner {
position: relative;
width: 1200px;
height: 500px;
margin-bottom: 9px;
top: -4px;
}
#banner img {
width: 1200px;
height: 500px;
}
전체 사이트는 http://holland.hansonimageworks.com에서 미리 볼 수 있습니다. 이 문제를 해결하는 방법에 대한 제안 사항이 있으면 알려 주시기 바랍니다. 감사!
문제를 완화 할 수 있는지 알아보기 위해이 작업을 수행했습니다. 문제는 여전히 동일한 문제가 발생하고 있다는 것입니다. 이제는 이미지 뒤에있는 몸체 배경 대신 단색 만 보입니다. 그래도 여전히 동일한 전환 문제가 있습니다. –
예, 'data-cycle-auto-height = 1200 : 500'을 시도해보십시오. 그래도 작동하지 않으면 이미지의 높이와 너비를 제거하십시오. 그래도 작동하지 않으면 img 위치를 절대로 설정하고 높이와 너비를 100 %로 설정하십시오. –
나는 이것에 후속 작업을하고 싶습니다 ... 나는 당신의 제안을 모두 세 번 시도해 보았습니다. 그리고 위의 조합이나 모두에 관계없이 여전히 문제가 있습니다. 그러나 시간을내어이 문제를 조사해 주셔서 감사합니다. 다른 제안? –