Javascript 重新访问=未调用image.onload

非常旧，但非常取消已解决主题：

图像。已调用onload

而不是

代码比文字更能说明故事

调用.html=

<script>
var newConnection = new MeasureConnectionSpeed();

if (newConnection.isHighSpeed())
    doSomething1;
else
    doSomething2;
</script>

<script>
function MeasureConnectionSpeed() {

    var connection = this;

    var imgDownloadSrc = "http://someLargeImage.jpg"; 
    var imgDownloadSize = 943 * 1024;     // bytes

    var startTime = 0,
        endTime   = 0;   // set later
    connection.isHighSpeedConnection = false;   // = a Object Property

    // an Object Method ...
    // just the function declaration which is called via
    // connection.computeResults()
    connection.isHighSpeed    = isHighSpeed;

    connection.computeResults = computeResults;   // another Object Method

    var testImgDownload = new Image();

    testImgDownload.onload = function () {

        endTime = (new Date()).getTime();

        connection.computeResults();

    }   // testImgDownload.onload


    testImgDownload.onerror = function (err, msg) {

        alert("Invalid image, or error downloading");

    }

    // We immediately continue while testImgDownload is still loading ...

    // the timer is started here and ended inside testImgDownload.onload 
    startTime = (new Date()).getTime();

    // This forces an attempt to download the testImgDownload and get the
    // measurements withOUT actually downloading to your Cache:
    var cacheBuster = "?nnn=" + startTime;
    testImgDownload.src = imgDownloadSrc + cacheBuster;


    function computeResults() {

        var speedMbps  = someNumber;

        connection.isHighSpeedConnection = speedMbps > 20;

    }   // computeResults

    // this.isHighSpeed() = isHighSpeed()
    function isHighSpeed() {

        return connection.isHighSpeedConnection;

    }

}   // MeasureConnectionSpeed

</script>

var newConnection=newmeasureconnectionspeed（）；
if（newConnection.isHighSpeed（））
doSomething1；
其他的
doSomething2；

调用.html=

<script>
var newConnection = new MeasureConnectionSpeed();

if (newConnection.isHighSpeed())
    doSomething1;
else
    doSomething2;
</script>

<script>
function MeasureConnectionSpeed() {

    var connection = this;

    var imgDownloadSrc = "http://someLargeImage.jpg"; 
    var imgDownloadSize = 943 * 1024;     // bytes

    var startTime = 0,
        endTime   = 0;   // set later
    connection.isHighSpeedConnection = false;   // = a Object Property

    // an Object Method ...
    // just the function declaration which is called via
    // connection.computeResults()
    connection.isHighSpeed    = isHighSpeed;

    connection.computeResults = computeResults;   // another Object Method

    var testImgDownload = new Image();

    testImgDownload.onload = function () {

        endTime = (new Date()).getTime();

        connection.computeResults();

    }   // testImgDownload.onload


    testImgDownload.onerror = function (err, msg) {

        alert("Invalid image, or error downloading");

    }

    // We immediately continue while testImgDownload is still loading ...

    // the timer is started here and ended inside testImgDownload.onload 
    startTime = (new Date()).getTime();

    // This forces an attempt to download the testImgDownload and get the
    // measurements withOUT actually downloading to your Cache:
    var cacheBuster = "?nnn=" + startTime;
    testImgDownload.src = imgDownloadSrc + cacheBuster;


    function computeResults() {

        var speedMbps  = someNumber;

        connection.isHighSpeedConnection = speedMbps > 20;

    }   // computeResults

    // this.isHighSpeed() = isHighSpeed()
    function isHighSpeed() {

        return connection.isHighSpeedConnection;

    }

}   // MeasureConnectionSpeed

</script>

函数MeasureConnectionSpeed（）{
var连接=这个；
变量imgDownloadSrc=”http://someLargeImage.jpg"; 
var imgDownloadSize=943*1024；//字节
var startTime=0，
endTime=0；//稍后设置
connection.isHighSpeedConnection=false；//=对象属性
//对象方法。。。
//只是通过调用的函数声明
//连接。计算机结果（）
connection.isHighSpeed=isHighSpeed；
connection.computersults=computersults；//另一个对象方法
var testImgDownload=新图像（）；
testImgDownload.onload=函数（）{
endTime=（新日期（））.getTime（）；
连接。计算机结果（）；
}//testImgDownload.onload
testImgDownload.onerror=函数（err，msg）{
警报（“无效图像或下载错误”）；
}
//当testImgDownload仍在加载时，我们立即继续。。。
//计时器在此处启动，并在testImgDownload.onload内结束
startTime=（新日期（））.getTime（）；
//这将强制尝试下载testImgDownload并获取
//未实际下载到缓存的测量：
var cacheBuster=“？nnn=“+startTime；
testImgDownload.src=imgDownloadSrc+cacheBuster；
函数计算机结果（）{
var speedMbps=someNumber；
connection.isHighSpeedConnection=speedMbps>20；
}//计算机结果
//this.isHighSpeed（）=isHighSpeed（）
函数isHighSpeed（）{
返回连接。isHighSpeedConnection；
}
}//测量连接速度

*编辑#1*

还有两位

我决定下载Google的Chrome，并在其上本地测试my.html。Chrome访问了我的原始代码的.onerror事件处理程序Safari和Firefox从来没有这样做过？？？

另一个奇怪的观察。。。使用Chrome，

alert（err）

在my.onerror事件处理程序中生成“undefined”。但是，我确实使用了

alert（this.width）

和

alert（this.naturalWidth）

，分别显示0。。。这意味着它是一个无效的图像？？？

即使我将src放在

.onload

处理程序之前，也会出现无效映像错误

现在就是这样

*编辑#2-2015年8月8日*

1） 我真的很抱歉我没有早点回来。。。但我开始感觉不舒服，所以多休息了一会儿

2） 不管怎么说，我实现了Dave Snyder的精彩IIFE代码，它确实有效。。。.onload处理程序中的代码正常工作，我非常感谢Dave和他为我提供的所有时间。当然，我放弃了newConnection=newmeasureconnectionspeed（）并使用了Dave的iLife方法

现在，我要做的就是弄清楚为什么这段代码给了我大约5 Mbps的速度，而我通过以太网路由器得到了30 Mbps的速度。我真的希望看到一个数字接近

我真的，真的很讨厌必须包含另一个API，因为我测量速度的全部目的是决定是否重定向到相对“繁忙”的站点或“保持简单”的版本

非常感谢，戴夫。你是我的英雄

---

约翰·洛夫（John Love）

这在Chrome中对我很有用

（函数（）{
变量imgDownloadSrc=”https://upload.wikimedia.org/wikipedia/commons/d/d8/Schwalbenschwanz_%28Papilio_machaon%29.jpg",
testImgDownload=新图像（），
开始时间，结束时间，
stackOverflowLog=document.getElementById（'log'）；
var log=函数（消息，str）{
stackOverflowLog.innerHTML+=message.replace（“%s”，str）+“
”；
console.log（消息，str）；
}
testImgDownload.onload=函数（）{
日志（'已加载图像！'）；
结束时间=+新日期（）；
日志（'结束时间：%s'，开始时间）；
日志（'总时间：%s'，（结束时间-开始时间））；
}
testImgDownload.onerror=函数（err，msg）{
抛出“无效图像，或下载错误”；
}
开始时间=+新日期（）；
日志（'开始时间：%s'，开始时间）；
testImgDownload.src=imgDownloadSrc+“？”+startTime；
日志（'下载：%s'，testImgDownload.src）；
})();

无标题文件
奇怪的事情。。。因为你提到了Chrome，我决定下载这个Google浏览器，并在上面本地测试我的.html。Chrome访问了我原始代码的.onerror事件处理程序，Safari从未访问过？？？另一个奇怪的观察。。。在.onerror处理程序中使用Chrome，alert（msg）生成“undefined”。所以，我的挑战将是找出触发错误的原因。我将坚持使用像Chrome这样的现代常青浏览器进行开发。一旦它在Chrome中工作，那么就要担心其他浏览器了。如果Chrome进入
.onerror
，听起来你的形象很糟糕。尝试使用上面维基百科中的一个。还可以使用Chrome中的控制台和
调试器
关键字。这将允许您单步检查代码，并准确查找失败的地方。
log（'end time:%s'，endTime）下面的示例代码片段适用于我在Chrome、Firefox和Safari中的工作。没问题！很高兴我能帮忙：）