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

This "IE8 jQuery.load () loading page does not show how to solve the article, most people do not understand, so the editor summed up the following content, detailed, clear steps, with a certain reference value, I hope you can read this article can have a harvest, let's take a look at this" IE8 jQuery.load () loading page does not show how to solve the article "it.

1. JQuery.load ()

JQuery.load (url, [data], [callback]) loads data from the server through an Ajax asynchronous request and puts the data into the specified element.

Url: the address of the request server

Data: optional, data sent on request

Callback: optional. Callback function after a successful request

Example:

$(".content") .load ("https://www.imooc.com/data/fruit_part.html")

Second, the reason why the loading page cannot be displayed by using jQuery.load () in IE8

First of all, in IE8, you can use the jQuery.load () method (under an IE-compatible version of jQuery)

Reason: there are html tags that are not closed in pairs in the loaded page, such as

Here are the key points for using the load () method in jquery

Today to do online chat page, chat can be accompanied by pictures, you need to use the pop-up layer to browse the big picture effect. A total of three layers, the bottom html main structure, the middle translucent mask, the top layer is a large thumbnail enlarged image. The user clicks the thumbnail and presents a large image on the translucent mask.

Because online chat, the number of pictures and addresses are dynamically unknown, so when a user clicks on a thumbnail, a large image element should be dynamically generated under body and displayed in the middle. The code is as follows:

(".smallImg") .click (function () {var imgPath = $(this) .attr ("src"); var zh_bigImg = "

"var maskBg =" $("body") .append (zh_bigImg) .append (maskBg); $(".zh _ bigImg") .attr ("src", imgPath); / / assign the acquired thumbnail src value to the newly generated large image / / the following code is used to set the center display of the large image, first set the css of the large image to absolute positioning, and top:50%;left:50%. Var bigImgTop =-$(".zh _ bigImg"). Height () / 2; var bigImgLeft =-$(".zh _ bigImg"). Width () / 2; $(".zh _ bigImg"). Css ({"margin-top": bigImgTop, "margin-left": bigImgLeft}); var zhBigImg = $(".zh _ bigImg"). Get (0) / / convert jq object to js object zhBigImg.onclick=function () {$(".zh _ bigImg,.maskDiv") .fadeOut (function () {$(this) .fadeOut (); / / remove this element after the fade-out effect is complete! });})

When you have just assigned the src of a thumbnail to a large image, it seems inappropriate to get the height and width values of the large image. As a result, the newly generated big image is always at the top:50%;left:50%. F12 opens the debugging window and finds that the margin-top,margin-left is 0. There will be some problems in all major browsers, sometimes effective and sometimes ineffective. It turns out later that I forgot to use the load () method. You should let the big image load, and then get the height and width values.

Change it to this:

$(".zh _ bigImg") .load (function () {var bigImgTop =-$(this). Height () / 2; var bigImgLeft =-$(this). Width () / 2; $(this). Css ({"margin-top": bigImgTop, "margin-left": bigImgLeft});})

It will be normal after that.

In addition, jquery needs to pay attention to a lot of things when it comes to dealing with dynamically created elements of the page. It does not respond to the events of dynamically created elements, and the problem can only be solved by binding events with the live () method (I don't know if it works directly with the native js). For example, click on the large image, it should be to clear this element.

Click (function () {$(this). Remove ()), the page will not have any response when you click on the larger image. Change it to: $(".zhbigImg") .live ('click',function () {$(this). Remove ()}) is fine.

The above is about the content of the article "how to solve if the jQuery.load () loading page in IE8 does not show". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to 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.