I would like to add online to the div element, but unfortunately I cannot add online to the div at this time.
However, I'd like to add an online item to the div, is there any alternative method?
"What I want to do is ""display other elements after loading the specified part of the online."""
<style>
.main_off{
display: none;
}
.main_on{
display:block;
}
</style>
<script>
function main_on(){
document.getElementById('main').className="main_on";
}
</script>
<noscript>
<style>
.main_off {display:block;}
</style>
</noscript>
</head>
<body>
<header>
<!--Change body css in image onload event-->
<img src="abcd.jpg" onload="main_on();"/gt;
</header>
<section id="main" class="main_off">
text
</section>
I would like to process the above sample code in div, but I could not make it happen with my knowledge, so I would like to ask for your help.
I look forward to hearing from you.
From <div>, the 'load' event does not occur, so simply taking the event is not feasible.As far as I can read the question, even if there is an event where <div> is loaded I feel that the definition is different from what the questioner is trying to achieve.
<div> Load Completed...
<div> elements are read by the browser<div>brabra</div>
<script>doSomething();</script>
As , ensure that the code is executed immediately after <div> is loaded.
<div> element rendering is completeThis is usually when <div> looks like all resources are loaded, so the must execute code after loading the CSS file and after loading the JavaScript UI library.You will start by putting the code before </body>.
...
<script>doSomething();</script>
</body>
</html>
<img> in <div> finishes loading,Monitor the 'load' event for all <img> elements in <div>, wait for all image resources to load, and then write the code so that the process begins. If you use jQuery, you will see the following:(It's a little dirty)
<div> Wait for all images to read before the div.onload() is called:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
// Allow the online function to be called after loading IMG in the element
jQuery.fn.extend({
enable_onload_for_images:function(){
vardiv = this[0];
varimgs = this.find("img");
var count = imgs.length;
if(count==0&div.onload)
div.onload.call(div, count);
var loaded = 0;
imgs.one("load", function(e){
// Image loaded
loaded++;
if(loaded===count&&div.onload)
div.onload.call(div, count);
}).each(function(){
if(this.complete||this.readyState===4)$(this).load();
});
}
});
$(document).ready(function(){
// Scan all div[.onload-on-img-onload] in the document and enable online
vardivs=$(".onload-on-img-onload";
divs.each(function(){$(this).enable_onload_for_images();});
});
</script>
<div class='onload-on-img-onload'onload="window.alert('all resources loaded')">
<img src="http://i.imgur.com/PWSOy.jpg"/>
<img src="http://i.imgur.com/PWSOy.jpg"/>
<img src="http://en.wahooart.com/Art.nsf/O/8XX79N/$File/James-E.-Buttersworth-Clipper-in-a-Heavy-Sea.JPG"/>
<img src="http://en.wahooart.com/Art.nsf/O/8XX79N/$File/James-E.-Buttersworth-Clipper-in-a-Heavy-Sea.JPG"/>
</div>
Am I correct in understanding that you would like to do some processing after loading all the images?
Personally, if you have no resistance to using jQuery, I think it is better to use Deferred to clean up asynchronous events.
You can do this as soon as you write a little plug-in.What do you think about this?
(I'm not used to using the posting system yet, so there might be an error.I'm sorry if there is one.)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$.fn.all_loaded=function(){
var all_done = [ ];
This.each(function(i,img){
varpromise = new$.Deferred();
all_done.push(promise);
img.onload=function(){
promote.resolve();
}
});
return$.when.apply(null, all_done);
};
</script>
<div class="images">
<img src="//dummyimage.com/200x100/"/>
<img src="//dummyimage.com/200x100/"/>
<img src="//dummyimage.com/200x100/"/>
</div>
<script>
$('.images img').all_loaded().done(function(){alert('all loaded')});
</script>
Can't I use interval?
var intv=setInterval(function(){
if($(`.target_div`).length>0){
clearInterval (intv);
// Do what you want here
}
}, 100);
© 2024 OneMinuteCode. All rights reserved.