I am being rate limited, because the code I am editing in a snippet is requesting nonexistent images in a loop.
I have fixed the reason for the rate limiting (I believe) by adding the tag <base href="https://example.com/" />
to the html, but that took me a while to figure out.
It would be rather nice to get a warning first and not just an error when the rate limiting is about to kick in while editing!
Here is an example snippet. If you type for a while in the textbox, you will be rate limited I believe because it loads an image per character you type and even though it gets a 404, it counts as a request in the quota.
The code could throttle/debounce the images but that was not part of the question and would not be a problem on OP's site
const lineLength = 20;
const space = 'FONT/space.png';
const newLine = '<br/>';
const userInput = document.getElementById('userInput');
const imageOutput = document.getElementById('imageOutput');
const generateImages = (str) => [...str.toUpperCase()]
.map((char, i) => {
if (char === '\n') return newLine;
const src = char === ' ' ? space : `FONTS/${char}${Math.floor(Math.random() * (4 - 1) + 1)}.png`;
const img = `<img class="bobbing-photo" alt="${char}" src="${src}" />`
// console.log(img)
return `${img}${(i>0 && i%lineLength === 0) ? newLine : ''}`;
})
.join('');
userInput.addEventListener('input', (event) => {
imageOutput.innerHTML = generateImages(userInput.value.trim());
document.querySelectorAll('.bobbing-photo').forEach(photo => {
var randomDelay = Math.random() * (0, 100) / 100; // Random delay between 0 and 2 seconds
photo.style.animationDelay = randomDelay + 's';
});
});
body { background-color: #f35c2c; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; font-family: "Work Sans", sans-serif; color: white; } img { height: 75px; } .bobbing-photo { float: left; position: relative; animation: bob-anim 0.5s infinite linear alternate; } body, input { font-size: 20px; }
<!-- base href="https://example.com/" / --><!-- delete this on your own server. When commented out on Stack Overflow, then I believe it generates rate limitations -->
Enter your message: <br />
<textarea id="userInput"></textarea>
<div id="imageOutput"></div>