2

我用 javascript 编写了一个滑块控件，对此有些担心。脚本在 window.onload 上初始化，并将所有具有类滑块的元素转换为滑块。
例如：

<div id="hueSlider" class="slider" min="0" max="360" value="240"></div>

问题是当 document.load 事件被触发时，元素还没有被渲染，所以我不能在没有滑块宽度的情况下计算滑块句柄位置。我做了一个解决方法，为每个滑块创建一个计时器，检查滑块是否具有非零宽度，然后设置句柄位置并自行移除。

但这是非常丑陋的解决方案。你知道如何以正确的方式做到这一点吗？

4

2 回答 2

0

你总是可以使用这个：

window.onload = function(){
    // Access elements in here
};

或者这样：

if(document.addEventListener) {
    document.addEventListener("DOMContentLoaded", function(){
        // Access elements in here for modern browsers
    }, false);
} else {
    document.attachEvent("onreadystatechange", function(){
        if(document.readyState === "complete") {
            // Access elements in here for older browsers
        }
    });
}
于 2013-04-09T19:17:31.793 回答
0 
function checkLoad()
{
     if (window.onLoad)
     {
          // you can call your statements in here
     } else {
          setTimeout('checkLoad();', 1000)
     }
}

您可以尝试的另一个技巧是：

    if (window.addEventListener){

       window.addEventListener('load', ready, false)

    } else if (window.attachEvent) {

      window.attachEvent('onload', ready)
    }

编辑：

如果上述两种方法都不起作用，请尝试下面的一种，它应该是万无一失的，如果这不起作用。您的代码中可能还有其他问题：

function makeDoubleDelegate(function1, function2) {
    return function() {
        if (function1)
            function1();
        if (function2)
            function2(); //call your get slider width statements in here.
    }
}

window.onload = makeDoubleDelegate(window.onload, myNewFunction );

这背后的逻辑是，makeDoubleDelegate() 函数将被放在第一个 JS 文件中，随时可以调用。它所做的是接受两个函数作为参数，检查它们是否存在，如果存在，则返回一个包含有效的现有函数的匿名函数。

第一次调用 window.onload 时，window.onload 本身是未定义的，所以返回的是一个匿名函数，里面只有 myNewFunction()。在随后的 window.onload 分配中，window.onload 确实存在，因此它所持有的任何内容都将被新函数包裹起来。所以名单越来越长。

于 2013-04-09T19:17:52.543 回答