rejectli
New Member
- Messages
- 25
- Reaction score
- 0
- Points
- 1
If you get the following error on your website then this might help.
This can happen if your webpage has a lot of small images that flood x10hosting with resource requests when the page is loaded. The result is that your images load (or fail to load) randomly.
I've been working on a way to solve this problem at the client side and so far have created this example. I did want to define the coordinates in the same line as an <img> tag but drawImage seems to only work with <canvas> and <canvas> does not have an onload() event. Maybe someone else can make it better.
Resource Limit Is Reached
The website is temporarily unable to service your request as it exceeded resource limit. Please try again later.
The website is temporarily unable to service your request as it exceeded resource limit. Please try again later.
This can happen if your webpage has a lot of small images that flood x10hosting with resource requests when the page is loaded. The result is that your images load (or fail to load) randomly.
I've been working on a way to solve this problem at the client side and so far have created this example. I did want to define the coordinates in the same line as an <img> tag but drawImage seems to only work with <canvas> and <canvas> does not have an onload() event. Maybe someone else can make it better.
<!DOCTYPE html>
<html>
<body>
<p>This page only loads one image.</p>
<table>
<tr>
<td><canvas id="c1"/></td>
<td><canvas id="c2"/></td>
<td><canvas id="c3"/></td>
<td><canvas id="c4"/></td>
</tr>
<tr>
<td><canvas id="c5"/</td>
<td><canvas id="c6"/</td>
<td><canvas id="c7"/</td>
<td><canvas id="c8"/</td>
</tr>
</table>
<script>
window.onload = function() {
(img = new Image()).src =
"http://68.media.tumblr.com/1dee464f3179885291f003d73db09f6d/tumblr_ndnl78QUvS1r5vojso5_500.jpg";
document.getElementById("c1").getContext("2d").drawImage(img, 0, 0, 166, 155, 0, 0, 166, 155);
document.getElementById("c2").getContext("2d").drawImage(img, 167, 0, 166, 155, 0, 0, 166, 155);
document.getElementById("c3").getContext("2d").drawImage(img, 334, 0, 166, 155, 0, 0, 166, 155);
document.getElementById("c4").getContext("2d").drawImage(img, 0, 158, 166, 155, 0, 0, 166, 155);
document.getElementById("c5").getContext("2d").drawImage(img, 167, 158, 166, 155, 0, 0, 166, 155);
document.getElementById("c6").getContext("2d").drawImage(img, 334, 158, 166, 155, 0, 0, 166, 155);
document.getElementById("c7").getContext("2d").drawImage(img, 0, 313, 166, 155, 0, 0, 166, 155);
document.getElementById("c8").getContext("2d").drawImage(img, 167, 313, 166, 155, 0, 0, 166, 155);
};
</script>
</body>
</html>
<html>
<body>
<p>This page only loads one image.</p>
<table>
<tr>
<td><canvas id="c1"/></td>
<td><canvas id="c2"/></td>
<td><canvas id="c3"/></td>
<td><canvas id="c4"/></td>
</tr>
<tr>
<td><canvas id="c5"/</td>
<td><canvas id="c6"/</td>
<td><canvas id="c7"/</td>
<td><canvas id="c8"/</td>
</tr>
</table>
<script>
window.onload = function() {
(img = new Image()).src =
"http://68.media.tumblr.com/1dee464f3179885291f003d73db09f6d/tumblr_ndnl78QUvS1r5vojso5_500.jpg";
document.getElementById("c1").getContext("2d").drawImage(img, 0, 0, 166, 155, 0, 0, 166, 155);
document.getElementById("c2").getContext("2d").drawImage(img, 167, 0, 166, 155, 0, 0, 166, 155);
document.getElementById("c3").getContext("2d").drawImage(img, 334, 0, 166, 155, 0, 0, 166, 155);
document.getElementById("c4").getContext("2d").drawImage(img, 0, 158, 166, 155, 0, 0, 166, 155);
document.getElementById("c5").getContext("2d").drawImage(img, 167, 158, 166, 155, 0, 0, 166, 155);
document.getElementById("c6").getContext("2d").drawImage(img, 334, 158, 166, 155, 0, 0, 166, 155);
document.getElementById("c7").getContext("2d").drawImage(img, 0, 313, 166, 155, 0, 0, 166, 155);
document.getElementById("c8").getContext("2d").drawImage(img, 167, 313, 166, 155, 0, 0, 166, 155);
};
</script>
</body>
</html>