Is there a way to ensure that an image has loaded before completing a function when clicked on a button? The button is only available after the page has loaded, with hidden and visible elements displayed based on mouse clicks. If it's not possible to check if the image has loaded onclick, is there a way to preload the image in the background so it's ready to be displayed when the button is clicked?
You should definitely give this code a try.
This code utilizes a callback function for when the button is clicked, causing the slide down effect to occur after the animation completes and then loading the image.
Lazy loading in action!
Hopefully, this will be of assistance to you.
$("#toggleButton").on('click',function(e){
$(".mydiv").slideDown(1000,function(e){
$('.myimg').each(function(e){
$(this).attr('src', $(this).attr('myimage')).css('background','none');
})
});
}).mydiv {
display: none;
}
img[myimage] {
display:block;
max-width: 100%;
height: auto;
width: 400px;
height: 380px;
background: #000 url(https://rentbluharbor.com/wp-content/uploads/ajax-loading-gif-4.gif) no-repeat center center ;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggleButton">Click To Animate</button>
<div class="mydiv">
<img class="myimg" myimage="https://demo.sirv.com/chair.jpg?hue=10" />
</div>**-- Many thanks! -- **
While exploring MailChimp's css inliner at , I found myself curious if there are any available classes that can achieve the same result. It would be convenient to have this functionality directly in my email code without relying on MailChimp. I am es ...
I am currently working on a web app using JQuery Mobile 1.4.5. Encounter an issue that seems to be related to either the browser or JQM bug specifically when using Google Chrome in fullscreen mode on Android (v.4.4.2). Upon clicking on the Click Here!! ...
I am currently working on an HTML email template. At the bottom of the email, there appears to be a white space pushing over the social media icons. Upon testing in different email clients, everything looks fine except for this issue. I have researched s ...
I am working on a class that I have created, which is called .blueButton. It contains some CSS styling that makes it look like a button. .blueButton { /* Styling properties go here */ } To implement this button, I use the following HTML code: <a ...
I tried following the instructions from this source: Unfortunately, the example code provided doesn't seem to be functioning properly now. Is there a way to achieve the same result without having that right margin so that it aligns better with the r ...
I am encountering an issue with my table layout. The structure is similar to the following: <tbody> <tr class="row">...</tr> <tr class="row--expanded">...</tr> <tr class="row">...</ ...
I am attempting to get the height of a specific element, but unfortunately I keep getting undefined. Here is what I have tried: var dl; $(window).load(function(){ dl = $("#dashboard_left").height(); }); $(document).ready(function(){ alert(dl); } ...
I have a question regarding the following HTML structure: <div class="a"> <div class="b"></div> <div class="c"></div> </div> My goal is to apply a specific CSS rule only within the a class: .b + .c { margin-le ...
When calling attr('id') on an immutable id attribute for an HTML element, my code runs smoothly when the id contains no hyphens. However, it encounters issues when the id includes a hyphen. $('.coloursContainer .radio-box').live(' ...
I've developed a quiz application using jQuery Mobile and I am working on implementing a timer feature. The timer should run from 0 seconds up to 1 hour but only when the user is viewing specific pages, specifically the question pages. The timer is di ...
I'm currently in the process of rebuilding a project, specifically a drag and drop website builder, using React after it was originally built with a heavy reliance on jQuery. My main challenge lies in being able to dynamically add and remove elements ...
I am encountering an issue with serializing my MVC form to JSON using JQuery and then deserializing some values, like the input field value, on the backend in C#. I have tried to serialize it in JSON without success. Can someone please assist me with this ...
I've encountered an issue with my HTML code for radios: <input type='radio' name='a_27' value='Yes' id='a_27_0' /> <input type='radio' name='a_27' value='No' id='a_2 ...
My latest project involves creating an application that converts HTML tables to JSON format. The code is functioning properly, but I've encountered an issue when the td or th elements contain inner components like span or other child elements. While I ...
Whenever a server side error occurs in PHP, it is captured as a hash and then transmitted back to the client side using AJAX in the form of JSON. This way, the errors are effectively passed to the AJAX success event. ... catch ($e) { echo ( array("err ...
I am having trouble changing the placeholder text using a function. I am unable to add any additional code to style the text, such as making it bold or adding an icon next to it. When I try to do so, the code is displayed as text instead of being executed. ...
Seeking assistance with retrieving the parameter sent via ajax... url: test.htm?a=1&b=2&c=3 I am trying to access the value of b. ...
Check out my code example on jsfiddle: https://jsfiddle.net/elenderg/wzarrg06/63/ In the first div, there are 10 buttons. See image below: https://i.sstatic.net/BDdtG.png <button class='btn btn-info custom' onclick="myFunction()" ...
I am looking to create a grid of clickable images that expand to cover the width of the browser window without any space on either side. Ideally, I would like each image to be 180x180px in size, but if it's easier they can resize based on the browser ...
While following a tutorial on YouTube, I encountered an issue where my expanding content, when exceeding the size of the window in a small screen view, prevented me from scrolling to the top. Interestingly, I could scroll to the bottom and back up to that ...