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.
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
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 specification, it will destroy the original dom structure, causing subsequent abnormalities in fetching dom and other nodes.
For example, the original
<html>
<head>
<title>test</title>
</head>
<body>
<textarea id="mytext"></textarea>
</body>
</html>If the data obtained by load is