7

JQuery event after div background-image is rendered

 2 years ago
source link: https://www.codesd.com/item/jquery-event-after-div-background-image-is-rendered.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

JQuery event after div background-image is rendered

advertisements

Thanks for taking some of your time.

I was wondering if there was a possible way using jQuery to trigger a function right after a div background image is finished downloading and rendered.

Let's say you have this div

<div id="img1" class="img1"> </div>

where img1 style is

.img1 {
    background-image: some_big_image.png;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    display: none;
}

concidering this javascript function

function showDiv() {
  $("#img1").fadeIn(1000);
}

Is there a way to call the previous function right after the image is rendered? By rendered I mean resized to fit nicely within its div and ready to be shown.

I found a lot of infos about triggering a function after page load or after downloading image but nothing about post-render.

You guys are the bests. Thank you in advance.

var img = new Image();
img.src = "/some_big_image.png";
img.onload = function( ) {
    $("#img1").css("background-image", "url('" + img.src + "')" ).fadeIn(1000);
}

Fiddle here


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK