What are the flaws in the jquery load method?

Defects of the jquery load method: 1. The load method will automatically ignore the head, body, and script tags; 2. The problem of scroll bar offset will occur after dynamic loading. Just use the callback function of the load method. It can be solved by adding "$(document).scrollTop(0);"; 3. Due to network delay and other problems, it is not sure which code to execute first; 4. There is a caching problem; 5. There will be structural damage problems.

The operating environment of this tutorial: windows7 system, jquery3.6 version, Dell G3 computer.

The jquery load() method can help us duplicate document parts of the page, such as the title bar and bottom information part. We can extract a template html and then dynamically load it into each page through the load method. Several problems were encountered during use

Defect 1: The load method will automatically ignore the head, body, and script tags

1. If you want to load the document content in the head and body, you can wrap the content in a div and then load it.

2. In the script part, we can use the callback of the load method. The function is dynamically created and loaded in

3. It is not recommended to load the style sheet dynamically, otherwise there will be a problem of page flashing, that is, when the page is refreshed, a picture without rendering the style will appear for 1 second, and then the normal picture will be restored (reason Same as below)

Defect 2: The problem of scroll bar offset will occur after dynamic loading

When refreshing the page . Scroll bar offset.
Under normal circumstances, we will put the script file at the end of the document body to prevent js from blocking the browser rendering. This causes us to execute our load method after the page is rendered. The dynamically loaded page is the last one. It was just added. The scroll bar was fixed at the top from the beginning. After dynamically loading the header part, the scroll bar will move downward and not return to the top.

Solution

Add $(document).scrollTop(0);

in the callback function of the load method, or use the async attribute of the script tag to let the js script load asynchronously, and then you can Script is placed in the head

Defect 3: Asynchronous loading problem

Since load is triggered asynchronously, the two lines of code in the following method are are executed concurrently at the same time. Due to network delays and other issues, it is not certain which sentence will be executed first.

And the f9e9f467eef3d7c578ccb55596434de3init16b28748ea4df4d9c2150843fecfba68 element with the id of templateId is passed through load is loaded in.

If $("#templateId").html("hellow"); in the third line is executed first, then $("#templateId") cannot be found (this The div has not been loaded yet), and the html("hellow") operation will not actually be executed.

function load(targetId,templateName) { $("#"+targetId).load(contextPath+templateName); $("#templateId").html("hello"); }

Defect 4: Caching problem

In order to reduce the load on the request server, many browsers make the same request address and optimize the historical data from the local cache. Therefore, we need to add some dynamic suffixes after the address.

function load(targetId,templateName) { var nowDate = new Date(); var randomId = nowDate.getTime();//防缓存 $("#"+targetId).load(contextPath+templateName+"?"+randomId); }

Defect 5: Structure damage problem

On the basis of trap 1 (cache problem), you may also encounter deeper problems The problem is that if the data we load does not comply with the 100db36a723c770d327fc0aef2ce13b1 specification, it will destroy the original dom structure, causing subsequent abnormalities in fetching dom and other nodes.

For example, the original

If the data obtained by load is4750256ae76b6b9d804861d8f69e79d3<

, then an irregular html closure will eventually be generated. See you next time You may not be able to retrieve the dom because the original structure is destroyed.

   
  <textarea><  

At this time we can change it to

function load(targetId,templateName) { var nowDate = new Date(); var randomId = nowDate.getTime();//防缓存 $("#"+targetId).load(contextPath+templateName+"?"+randomId,{},function (responseTxt){ $("#"+targetId).val(responseTxt); }); }

and generate it at this time The html element will not be inserted as a dom node, but as the original text of the text field, so the original dom is not destroyed. So the next time the value will be normal

    
  "\<textarea\>\<"  

[Recommended learning ：jQuery video tutorial、web front-end video】

The above is the detailed content of What are the flaws in the jquery load method?. For more information, please follow other related articles on the PHP Chinese website!