Question

我在加载image1时使用load语句加载其他图像。

$('img#Image1').load(function () {
    blnLoad = true;
        //SomeCode      
})

当浏览器从服务器加载Image1时，它希望将该图像保存到客户端的缓存中，当我们想要重新加载页面时，此图像无法加载。和load语句无法完成代码，修复此问题的方法是什么？

Answer 1

我有一个语句加载演示

html

    <div id="list_image">
    <img src-load="http://wowslider.com/images/demo/box-stack-v/data1/tooltips/desert.jpg" class="need-to-load" />
    <img src-load="http://wowslider.com/images/demo/box-stack-v/data1/tooltips/flamingo.jpg" class="need-to-load" />
    <img src-load="http://wowslider.com/images/demo/box-stack-v/data1/tooltips/flora.jpg" class="need-to-load" />
    <img src-load="http://wowslider.com/images/demo/box-stack-v/data1/tooltips/salt__flat.jpg" class="need-to-load" />
    <img src-load="http://wowslider.com/images/demo/box-stack-v/data1/tooltips/stone_tree.jpg" class="need-to-load" />
</div>
<div id="result">
</div>

CSS

    #list_image img{
    background:#333;
    height:90px;
    width:120px;
}

和js

    $(document).ready(function(){
    statementLoadImage();
});
function statementLoadImage(){
    $(".need-to-load:first").attr({"src":$(".need-to-load:first").attr("src-load")}).removeClass("need-to-load").removeAttr("src-load").one("load",function(){
        var currentTime = new Date().getTime();
        $("#result").append("<div><span style='color:#f00'>"+currentTime+":</span> Load complete "+$(this).attr("src")+"</div>");
        if($(".need-to-load").length>0){
            statementLoadImage();
        }
    });
}

或者你可以看到demo jsfiddle.net/haduythuan/FWehe/5

Answer 2

function getTimeLoadImage(theimage,callback){
    var timeStart = new Date().getTime();
    var timeEnd;
    var download = new Image();
download.onload = function () {
        timeEnd = (new Date()).getTime();
        var thetime = (timeEnd - timeStart)/1000;
        callback(thetime)
    }
download.src = theimage;
}

并使用此

getTimeLoadImage("link image",
    function(time){
        //call back after geting the time
    });

在此处查看演示 jsfiddle.net/haduythuan/KG9vK/3

如何在第二次重新加载页面上完成JQuery load语句

2 个答案: