Menu
For example, I have the following simple HTML page, where the <span>[SOME FIELD]</span> is repeating many times to make up for about 200K of the file size:
<!DOCTYPE html>
<html>
<head>
</head>
<body editableContent="true">
<span>[SOME FIELD]</span>
<span>[SOME FIELD]</span>
...
<span>[SOME FIELD]</span>
</body>
</html>
As the content grows, the editing experience is becoming very laggy. It's literally impossible to type or edit the content.
Here is a complete repro case. To see what I mean, just move the cursor to the end of the editable content and try editing. It lags big time under IE and Chrome, making it almost impossible to type. It works great under Firefox, though.
The problem: I need to get it working reasonably fast under IE.
So far, I got close with IE8 emulation (with <meta http-equiv="X-UA-Compatible" content="IE=8">), so this works (under IE).
However, I need to support IE=edge, too. Any advice on how to make this happen would be greatly appreciated. IMO, it's a bug (which I submitted here for IE and here for Chrome), but I'm looking for any workaround.
Updated, a bounty is offered for any solution that works while loaded in stand-alone IE browser or a custom application hosting WebBrowser control, using IE=edge HTML document mode.
Updated, the corresponding IE bug reported was just closed as "Won't fix".
249
Why not break the data down and store it in an array or Json object and only read a portion at a time, updating as the user scrolls or moves through the content. This way only a small portion will being processed at any point in time. If you use Jquery you could get the id from the class reference. If you don't want to use Jquery you could write a class identifier function in raw Javascript. The below is rough but you can get the idea.
<!DOCTYPE html>
<html>
<head>
</head>
<body editableContent="true">
<span id="item1" class="handle_items">[SOME FIELD]</span>
<span id="item2" class="handle_items">[SOME FIELD]</span>
...
<span id="item-n" class="handle_items">[SOME FIELD]</span>
</body>
</html>
<script>
$(function(){
var arrayData = [];
$(".handle_items").mouseover(function() {
var identVar = $( this ).prop('id');
fillHtml(identVar);
});
function fillHtml(identVar) {
$("#" + identVar).html(arrayData[i]);
}
});
</script>
Selecting a character with mouse or SHIFT + ARROW and then deleting by hitting DELETE will return the editing speed to normal in IE.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
