I am building a small project website to learn more about WebDev.
I try to get random images from imgur. It works good to the point where I want to "filter" the removed.png redirection if an image didnt exist or was deleted. But I keep getting stuck in an endless loop. Maybe someone can help me out here find the error!
Example snippet (It will stop your browser if you run it tho):
function fetch() {
var src = document.getElementById("imageGrid").innerHTML = "";
var max = 50;
var i;
for(i = 0; i < max+1; i++)
{
var tries = 0;
var validPic = true;
var img = document.createElement("img");
img.id = i;
img.height = 64;
img.width = 64
while(validPic)
{
tries ++;
img.src = generate_string(5);
if(testRedirect(img.src))
{
var validPic = false;
var src = document.getElementById("imageGrid");
src.appendChild(img);
}
}
}
$("img").addClass("loadedImage");
$("img").attr("onmouseover","imageEnlarge(this)");
}
function testRedirect(url) {
var actualUrl = "";
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.send();
if (url != xhr.responseURL) {
console.log("redirected to: " + xhr.responseURL);
return false;
}else{
console.log("no redirecton found");
return true;
}
return false;
}
function generate_string(length) {
var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz";
var string = "";
var i;
for (i = 0; i < length; i++) {
string += chars[Math.floor((Math.random() * chars.length) + 0)];
}
return "http://i.imgur.com/" + string + ".jpg";
}
function imageEnlarge(x) {
document.getElementById('bigImage').src = x.src;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="scripts/fetch.js"></script>
<script src="scripts/jquery.js"></script>
</head>
<body>
<button id='fetchButton' onclick="fetch()">Imgur</button>
<div id="imageGrid"></div>
<img id="bigImage" width="400" height="400"/>
<script>
</script>
</body>
</html>I considered the [marked as duplicate] - Question link. And tried to apply it to my case. This is what I got now. I think I dont really grasp the asynchonous stuff just now. Can someone help me out?
New code:
function fetch() {
var src = document.getElementById("imageGrid").innerHTML = "";
var max = 50;
var i;
for(i = 0; i < max+1; i++)
{
var validPic = true;
var img = document.createElement("img");
img.id = i;
img.height = 64;
img.width = 64
while(validPic)
{
var validImgur = false;
img.src = generate_string(5);
testRedirect(img.src, function(x){var validImgur = x; });
if(validImgur)
{
var validPic = false;
var src = document.getElementById("imageGrid");
src.appendChild(img);
}
}
}
$("img").addClass("loadedImage");
$("img").attr("onmouseover","imageEnlarge(this)");
}
function testRedirect(url, fn) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
if(url != xhr.responseURL) {
console.log("redirection to: " + xhr.responseURL);
fn(false);
}else {
console.log("no redirection found");
fn(true);
}
}
};
xhr.send();
}
function generate_string(length) {
var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz";
var string = "";
var i;
for (i = 0; i < length; i++) {
string += chars[Math.floor((Math.random() * chars.length) + 0)];
}
return "http://i.imgur.com/" + string + ".jpg";
}
function imageEnlarge(x) {
document.getElementById('bigImage').src = x.src;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="scripts/fetch.js"></script>
<script src="scripts/jquery.js"></script>
</head>
<body>
<button id='fetchButton' onclick="fetch()">Imgur</button>
<div id="imageGrid"></div>
<img id="bigImage" width="400" height="400"/>
<script>
</script>
</body>
</html>
