I would like to ask help as to why my image does not load right away. It is expected that the image will display with random points like this:
However, in my case, I need to refresh the page again before it appears just like the image above. I don’t know what needs to be added as I am just learning about javascript along with php.
Here is the code:
<!--call $img query to display image-->
<?php if(isset($img) && mysqli_num_rows($img)) : ?>
<?php while($row = mysqli_fetch_assoc($img))
{
//the variable for the map_image_filepath stored in database
$filepath = $row['map_image_filepath']; ?>
<script src = "jquery.min.js"></script>
<script>
var canvas = null;
var context = null;
var imageObj = null;
window.onload = function()
{
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
imageObj = new Image();
var image = '<?php echo $filepath?>';
imageObj.src = image;
context.drawImage(imageObj, 0, 0, imageObj.width*2, imageObj.height * 2);
canvas.addEventListener('mousedown', getCoords);
draw();
}
function draw()
{
ctx = canvas.getContext('2d');
ctx.fillStyle = "black";
for(var i = 0; i < 2; i++)
{
var x = Math.random()*400;
var y = Math.random()*300;
ctx.beginPath();
ctx.arc(x , y, 2, 0, 2 * Math.PI, false);
ctx.fill();
ctx.stroke();
ctx.closePath();
}
}
function getCoords(evt)
{
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var X = evt.pageX - 305;
var Y = (evt.pageY - canvas.offsetTop) - 256;
x = event.pageX;
y = event.pageY;
document.getElementById("x").value = X;
document.getElementById("y").value = Y;
}
</script>
The php code is used to call the variable $img from my query.php file in order to display the image from the mysql table. The java script code is used for displaying the points on the said queried image.
Thanks in advanced guys, would very much appreciate the help as much as I am eager to learn in this process!
Hi @m_hutley! Should the php code be removed or placed after the js code? I am sorry, if I got it right to execute an echo for the mysqli_num_rows to check if it returns a non-zero number because it did.
Well no,the PHP code is fine where it is.
And yes, you’ve got the right debugging tactic - echo echo everywhere.
So here’s how I would start to debug this.
<?php if(isset($img) && mysqli_num_rows($img)) :
echo "Debug|"; ?>
<?php while($row = mysqli_fetch_assoc($img))
{
echo "Debug|";
//the variable for the map_image_filepath stored in database
$filepath = $row['map_image_filepath'];
echo $filepath."|".filesize($filepath)."|";
?>
<script src = "jquery.min.js"></script>
<script>
var canvas = null;
var context = null;
var imageObj = null;
window.onload = function()
{
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
imageObj = new Image();
var image = '<?php echo $filepath ."?cb=".uniqid() ?>';
Reload the script in such a way that it generates the blank, and check the following:
The script should output “Debug|Debug|afile/path/toimage.jpg|######” (with the number being NOT a zero.)
The final line is a cache-buster, by appending a constantly-changing GET variable to prevent the browser caching the result.
(Note that if you’re unable to get a blank to load once you make this change, then Rubble was absolutely right, and the problem was caching of the image.)
Hi @m_hutley! I was able to reload it generating a blank plus giving me an output same as the format = “Debug| Debug|…/img/map.jpg|21556|”. After adding this to the code, I didn’t get the blank to load. It does seems a problem with caching.How should I proceed?
Well if the blank doesnt load anymore, then the problem is caching of a blank image, is isolated to your browser, and shouldnt be an issue going forwards. Remove the echos, but leave the uniqid in to prevent the browser caching the image.
Does it really happen in javasacript? Because if I remove the script and let the image be displayed using php, it displays right away without needing to refresh the page again.
Nothing in the Javascript strikes me immediately as being wrong…unless your page later redefines the onload trigger…you’re using jQuery, so you can replace that with
if that still causes the problem, start adding console.log commands to debug with (one in the start of the first function, one inside draw, etc) to find out if the script is actually executing everything or not.
