5 Replies - 1256 Views - Last Post: 21 January 2013 - 08:12 AM

#1 JD.CoolPenguin  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 05-May 12

Strange bug happens first couple of times round but works after

Posted 19 January 2013 - 08:08 AM

Related to but not the same as this post: Is this good or bad code?

Okay, so I have a function that resizes an image to fill the screen (only landscape images and landscape browser).

I also have a function that uses setInterval() to change the image (automatic slideshow - no controls).

They work beautifully separately.
But when I put them together I get a weird bug... the first couple of times around the images aren't resizing properly. After one or two times round it resizes perfectly. Because it works after a couple of times, my best guess is that it has something to do with the image loading? But I'm not sure.

So here it is.

index2.php
<!DOCTYPE html>
<head>
<title>Turn It Up Photography</title>
<meta name="keywords" content="Photography, Music, Turn It Up">
<meta name="description" content="Music Photography Agency">
<meta http-equiv="charset" content="iso-8859-1">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<?php include 'functions.php'; ?>
<div id="bkgr"><img src="images/featured/ex17.jpg"></div>
<div id="sidebar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
<div id="footer">Turn It Up &copy; 2013.<br>All rights reserved.<br>Privacy policy.<br></div>
</div>
</body>
</html>


functions.php
<?php
$directory = "images/featured/";
$images = glob($directory . "*.*");
?>
<script>	
	var playSlide = function(){
		var imgArr = <?= json_encode($images) ?>;
		var len = imgArr.length-1;
		var strt = Math.floor(Math.random()*len);
		$("#bkgr img").attr("src",imgArr[strt]);
		strt++;
		
		setInterval(function(){
		$("#bkgr img").attr("src",imgArr[strt]);
		if (strt < len)
		   {
		   strt++;
		   }
		else
		   {
		   strt = 0;
		   }
		imgSize();
		}, 3000);
	};
	
	var imgSize = function(){
		var theimg = new Image();
		theimg.src = $("#bkgr img:first").attr("src");

		var imgrat = theimg.width/theimg.height;
		var elmw = $("#bkgr").width();
		var elmh = $("#bkgr").height();
		var elmrat = elmw/elmh;

		if (imgrat<elmrat)
		  {
		  $("#bkgr img").css({"width":"100%","height":"auto"});
		  }
		else
		  {
		  $("#bkgr img").css({"height":"100%","width":"auto"});
		  }
  
		//Centering
		$("#bkgr img").css('left', (elmw - $("#bkgr img").width())/2);
		$("#bkgr img").css('top', (elmh - $("#bkgr img").height())/2);
	};
	
$(window).load(function(){
	imgSize();
	playSlide();
});

$(window).resize(function(){
	imgSize();
});

</script>


style.css:
html, body {
margin: 0 auto;
padding: 0;
width: 100%;
height: 100%;
}

img {
margin: 0 auto;
padding: 0;
}

body {
font-family: Helvetica, Verdana, Sans-Serif;
text-align: center;
font-size: 16px;
}

a {
text-decoration: none;
color: #e6e6e6;
}

#bkgr {
background: #000;
margin: 0 auto;
padding: 0;
height: 100%;
width: 80%;
position: fixed; top: 0; left: 20%;
z-index: -100;
}

#bkgr img
{
position: relative;
border: 0;
}

#sidebar {
background: #000;
margin: 0;
padding: 2.5%;
position: fixed; top: 0; left: 0;
width: 15%;
height: 100%;
font-size: 1em;
color: #e6e6e6;
}

#sidebar img {
width: 100%;
}

#sidebar ul, #sidebar li {
text-align: left;
list-style-type: none;
margin: 0 auto;
padding: 0;
border: 0;
}

#sidebar li {
border-bottom: 1px dashed #fff;
margin-bottom: 1em
}

#footer {
position: fixed; left: 0; bottom: 0;
width: 20%;
font-size: 0.75em;
padding: 0;
margin: 0 auto;
margin-bottom: 0.5em
}

(The stylesheet has been whipped together pretty quickly, but it shouldn't be causing any issues.)

And to see it: EXAMPLE
Okay, so there are 6 (maybe 7?) images in the folder, the first one or two times around, they don't resize properly (resizing the browser resizes the image properly), but after that they start resizing absolutely fine.

Anybody know why?

Thanks,
JD.

Is This A Good Question/Topic? 0
  • +

Replies To: Strange bug happens first couple of times round but works after

#2 JD.CoolPenguin  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 05-May 12

Re: Strange bug happens first couple of times round but works after

Posted 19 January 2013 - 08:30 AM

I was using it in Chrome. I just tested it in FF, it had the same problem but not for as long.
Was This Post Helpful? 0
  • +
  • -

#3 JD.CoolPenguin  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 05-May 12

Re: Strange bug happens first couple of times round but works after

Posted 19 January 2013 - 08:50 AM

Because I suspected it was the image load time that was causing the issue, I have added
		for (var i=0;i<imgArr.length;i++)
			{
			$("#preload").append("<img src='" + imgArr[i] + "'><br>");
			}


to playSlide()
and a div with id preload and style display none in the index.php.

This seems to be pretty much solving the problem.
(I've removed it again so that you can see what my issue is).

So my added question is, is there a way I can tell imgSize() to wait until the image has fully loaded before executing?

Thanks,
JD.
Was This Post Helpful? 0
  • +
  • -

#4 JD.CoolPenguin  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 05-May 12

Re: Strange bug happens first couple of times round but works after

Posted 19 January 2013 - 09:57 AM

Also, is there a way I can pass the image I've just set in playSlide() to imgSize() as I feel this would be more efficient than having to check #bkgr img:first everytime imgSize() is accessed.

(Again, apologies for multiple posts, I'm working things out as I go along, and I don't get an edit post button until I've made 15 posts).

Thanks,
JD.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3511
  • View blog
  • Posts: 11,992
  • Joined: 12-December 12

Re: Strange bug happens first couple of times round but works after

Posted 19 January 2013 - 11:26 AM

        var theimg = new Image();
        theimg.src = $("#bkgr img:first").attr("src");

        var imgrat = theimg.width/theimg.height;


You are changing the src and immediately trying to read its height and width. As it is the same image as the one from '#bkgr img:first' I think you should read the size of that image (as it is already loaded).

You can use code like the following to await the image-loading:

$('#myImage').attr('src', 'image.jpg').load(function() {  
  alert('Image Loaded');  
});


but the load event will probably not run if the image is already in the browsers' cache.

And, yes, you can pass values or objects between functions: function parameters.

This post has been edited by andrewsw: 19 January 2013 - 11:30 AM

Was This Post Helpful? 0
  • +
  • -

#6 JD.CoolPenguin  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 05-May 12

Re: Strange bug happens first couple of times round but works after

Posted 21 January 2013 - 08:12 AM

Thanks.
I'll be honest, I think I'm trying to learn too much too fast, so I'm starting over and taking it one step at a time.

Thanks,
JD.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1