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
Youtube Iframe API: How to Control an Iframe Player That's Already in the HTML
Create a Custom Callback in JavaScript
JavaScript % (Modulo) Gives a Negative Result for Negative Numbers
How to Make a Promise from Settimeout
Is There a Better Way to Do Optional Function Parameters in JavaScript
Is Safari on iOS 6 Caching $.Ajax Results
Check Whether a String Matches a Regex in Js
Javascript, Node.Js: Is Array.Foreach Asynchronous
How to Strip HTML Tags from String in JavaScript
Display Date/Time in User's Locale Format and Time Offset
Constructor Function VS Factory Functions
JavaScript - Href VS Onclick for Callback Function on Hyperlink
How to Wait for Set of Asynchronous Callback Functions
Getting Around X-Frame-Options Deny in a Chrome Extension
Constructors in JavaScript Objects
When to Use Es6 Class Based React Components VS. Functional Es6 React Components
React - Uncaught Typeerror: Cannot Read Property 'Setstate' of Undefined