John Davidson

Message:

SO I try to preview an image from bbcode decoder the code work fine but issue is I need that image inside <a> href link so that people can click it and get the image source and also I put massage on that like: CLICK ON IMAGE FOR FULL SIZE,

So I put here a simple Jscript function and inside it I call a variable and put document.getElementById, after doing that then I put variable.innerHTML and put my image massage and <a href> value.

But when I run on my browser its just load like a endless loop. It just load over and over again.

Here is my full code: 1st code from php bbcode decoder and the 2nd code only html because I was not sure if my php code do that either way It not solving.

1st

    <script>

    function linkset(img) {

            var fio=document.getElementById(img.name);

            fio.innerHTML='<strong>Click on image for full size view.</strong><br /><a href="'+img.src+'" target="_blank">'+fio.innerHTML+'</a>';

    }

    </script> 









<?php



$img_count = 0;



function parseimage($matches)

{

    global $img_count;



    $img_count++;



    return "\n<div id=\"img{$img_count}\" style=\"font-size:x-small; display:inline;\">\n<img name=\"img{$img_count}\" onload='linkset(this);' src='$matches[1]' border='0' alt='' /></div>";

}



$content = "[img]https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg[/img]";



$result = preg_replace_callback('/\[img\]((http|ftp|https):\/\/([a-zA-Z0-9\/\-\+\?\&\.\=\_\~\#\'\%\;]*))\[\/img\]/i', 'parseimage', $content);



?>



<?php echo $result; ?>

2nd

    <script>

    function linkset(img) {

            var fio=document.getElementById(img.name);

            fio.innerHTML='<strong>Click on image for full size view.</strong><br /><a href="'+img.src+'" target="_blank">'+fio.innerHTML+'</a>';

    }

    </script> 













<?php 



$ssq = "https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg";



?>





<div id="img" style="font-size:x-small; display:inline;"><img name="img" onload="linkset(this);" src="<?php echo $ssq; ?>" border="0" alt="" /></div>

Result came like that:

<div id="img1" style="font-size:x-small; display:inline;">

<strong>Click on image for full size view.</strong><br>

<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">

<strong>Click on image for full size view.</strong><br></a>

<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">

<strong>Click on image for full size view.</strong><br></a>

<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">

<strong>Click on image for full size view.</strong><br></a>

<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">

<strong>Click on image for full size view.</strong><br></a>

<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">

<strong>Click on image for full size view.</strong><br></a>



<img name="img1" onload="linkset(this);" src="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" alt="" border="0"></a>

</div>

This thing loop over and over but why??????????

<strong>Click on image for full size view.</strong><br>

<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">

<strong>Click on image for full size view.</strong><br></a>

Please Help........

---

My Answer:
the onload event to stop loading. Here is an example of how you can achieve this:

html













In this example, the `previewImage` function is called on the `onload` event of the window. The function sets the `src` attribute of the `img` element to the image URL and then stops the loading of the page. This will prevent any further loading of resources after the image is displayed.