CODEWITHSUNDEEP
jqueryfunctionload
MojtabaSh
MojtabaSh

Reputation: 637

How to done JQuery load statement at second reload page

I use load statement for load others images when image1 is loaded.

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

when browser load Image1 from server, it want save that image to cache of client side and when we want reload page this image whould not loaded. and load statement can not done codes, what's way for fix this problem?

Upvotes: 0

Views: 108

Answers (2)

HDT
HDT

Reputation: 2047

I have a demo for statement load

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;
}

and 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();
        }
    });
}

Or you can see demo jsfiddle.net/haduythuan/FWehe/5

Upvotes: 1

HDT
HDT

Reputation: 2047

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;
}

and uses this

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

see demo here jsfiddle.net/haduythuan/KG9vK/3

Upvotes: 0

Related Questions