Asynchronously Load Images with Jquery

Asynchronously load images with jQuery

No need for ajax. You can create a new image element, set its source attribute and place it somewhere in the document once it has finished loading:

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
.on('load', function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
alert('broken image!');
} else {
$("#something").append(img);
}
});

Asynchronous loading images

For sequentially loading multiple images, try these two questions:

JavaScript waiting until an image is fully loaded before continuing script

Wait until image loads before performing function

How to load image asynchronously using jquery while animating pictures as screenshot

thanks for your code examples. After some tries with it and some further help from a friend we get it working. Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.timer.js"></script>
//<script src="jquery.center.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<div id="imageWrapper" class="hide">
<img id="bild1" style="height: 100%;" src="logo.jpg" alt="Logo" />
<img id="bild2" style="height: 100%; display: none;" src="logo.jpg" alt="Logo" />
</div>
<script>
setImage($('#bild2'));
var timer = $.timer(function()
{
var visible = $('#imageWrapper img:visible');
var hidden = $('#imageWrapper img:hidden');

if (!hidden[0].complete || typeof hidden[0].naturalWidth == "undefined" || hidden[0].naturalWidth == 0)
hidden.attr('src','logo.jpg'); //Show logo in error case

if(hidden.attr('src')!= visible.attr('src'))
{
visible.fadeOut(1000, function() {
setImage(visible);
hidden.fadeIn(1000);
});
}
else
setImage(hidden); //don't fade if current and next picture are the same (e.g. error pic -> error pic), but try to set new image
});

$("#imageWrapper img").error(function()
{
$(this).attr('src','logo.jpg');
});
timer.set({ time : 5000, autostart : true });

function setImage(img)
{
img.attr('src','http://localhost/test.php?'+(new Date()).getTime());
}
</script>
</body>
</html>

Loading images asynchronously with Laravel/jquery

I would suggest you sending back a JSON response. The Controller's method would find the right image names/relative paths and return all that set packaged in a JSON response. You can add any other information along too.

return response()->json([
'images' => <image-array-set>,
'something_else' => $something_else_here
]);

Then in your client side/Javascript you'd parse this information and load the images accordingly, and do anything else you want in the process.



Related Topics



Leave a reply



Submit