IE6 Image Flickering in Components - Ext JS

最新推荐文章于 2025-02-01 17:42:36 发布

最新推荐文章于 2025-02-01 17:42:36 发布 · 88 阅读

文章标签：

#EXT #CSS #JavaScript #Cache #IE #ViewUI

extJs 专栏收录该内容

281 篇文章

订阅专栏

本文介绍了一种解决IE6浏览器中图片闪烁及提高加载效率的方法。通过静态和动态背景图片缓存函数，确保所有图片预先加载，减少页面加载过程中的闪烁现象。此方案不仅适用于IE6，还对部分Opera浏览器版本有所助益。

I'm seeing a lot of image downloads in the TreePanel demo, and in general flickering here and there.

This can be fixed as a two-parter.
1. Static background image cache function.
- anonymous function that executes on page load and caches all "static html" css calls.
2. Dynamically-written background image cache function.
- invoked function that writes empty divs to the html page to cache css classes which are not "concrete html" at page serve time.

Between the two, as long as they are invoked prior to dynamically writing html/css, should cache all IE6 images. I've noticed the second function also helped image reloading for my Opera 9.01.

Part 1

<script>
// Can be placed anywhere
// Credit to Hedgerwow
(function(){

    /*Use Object Detection to detect IE6*/
    var  m = document.uniqueID /*IE*/
    && document.compatMode  /*>=IE6*/
    && !window.XMLHttpRequest /*<=IE6*/
    && document.execCommand;
    
    try{
        if(!!m){
            m("BackgroundImageCache", false, true) /* = IE6 only */ 
        }
        
    }catch(oh){};
})();
</script>

Part 2
(

//this can obviously be prettied up, made into an object, and a little more browser specific.
//credit to me! :)
<script type="text/javascript">
   // i'd put this next to the javascript modules which are using it.
    cacheCss(["classNameHere", "className2", "etc"]);
</script>

// library
function _cacheIE(className) {
    document.write('<div class=\"' + className + '\" style="display : none"></div>');
}
function _cacheOther(className) {
    document.write('<div class=\"' + className + '\" style="height : 0px"></div>');
}

function _chooseCacherFn() {
    return (window.ActiveXObject) ? _cacheIE : _cacheOther;
}

function _doCache(fn, els) {
    if (!els) return;
    var arr = (!els.length) ? [els] : els;
    for (var i = 0; i < arr.length; i++) {
        fn(arr[i]);
    }            
}

function cacheCss(cssClasses) {
    _doCache(_chooseCacherFn(), cssClasses);
}