Shulou(Shulou.com)06/01 Report--

I would like to share with you the callback method of how to implement the .html () function. I believe most people don't know much about it, so share this article for your reference. I hope you will gain a lot after reading this article. Let's take a look at it!

Through JQuery. The html () function makes it very easy to load a HTML into a specified element, such as putting a set of pictures in. The problem is JQuery's. The html () function is synchronized. If we want to know the height of the container after HTML is loaded, such as getting the value of the container's offsetHeight or scrollHeight attribute, we must wait until all the contents of the HTML element are loaded before we can get the real value, especially if the HTML contains the image tag. Then how can it be achieved. What about the callback method of the html () function?

The corresponding code is as follows:

Copy the code

Var defer = Q.defer ()

Var realHtml = $('# html-canvas')

RealHtml.html (html)

Var contentImages = $("# html-canvas img")

Var totalImages = contentImages.length

Var loadedImages = 0

If (contentImages.length = = 0) defer.resolve ()

Else {

ContentImages.each (function () {

$(this) On ('load', function () {

LoadedImages++

If (loadedImages = = totalImages)

{

Defer.resolve ()

}

})

})

}

Return defer.promise.then (function () {

Console.log ('all done.')

})

Copy the code

It is preferred to find all HTML-added img elements in easy through the JQuery selector, then add onLoad events to all img elements and determine whether onLoad events for all img elements have been triggered (loadedImages = = totalImages). Then the promise of Q is notified by defer.resolve () that the asynchronous operation has been completed, and then the. In the then () function, you can proceed to the next step.

The above is all the contents of the article "how to implement the callback method of the .html () function". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.