-2


I tried this code for a line preloader but it didn't work and i don't know where is the problem.

var $preload = $("<div class='preloader'><div class='percent'></div><div class='line-parent'><div class='line'></div></div></div>");
$("body").prepend($preload);

var $imgs = $("img");
var imgsLoaded = 0;
var ratio = 0;

$imgs.each(function(){
    $this = $(this);
    $this.load(function(){ 
        imgsLoaded++;
        ratio = imgsLoaded / $imgs.length;

        $(".percent").html(ratio / 0.01 + "%");

        $(".line").animate({
            width : ratio / 0.01 + "%"
        });
    }, function(){
        if(ratio === 1){
            $(".preloader").fadeOut();
        }
    });
});
Amine Akhouad
  • 15
  • 1
  • 1
    Please define 1) "line preloader" 2) "didn't work." What should happen? What happened instead? What errors do you see? – JAAulde Jul 26 '15 at 12:32
  • line & preloader are defined in the first line code... the preloader stays at 100% and it does't fade out, it even doesn't animate from 0 to 100% – Amine Akhouad Jul 26 '15 at 12:36
  • what does `console.log($imgs.length)` show – Jaromanda X Jul 26 '15 at 12:45
  • @JaromandaX it shows 13 – Amine Akhouad Jul 26 '15 at 12:48
  • Sorry, I wasn't asking for you to define it in your code. I was asking you to tell us what a "line preloader" is. I assume at this point that it is some sort or progress bar. – JAAulde Jul 26 '15 at 12:50
  • @JAAulde preloader is the container (it contains all screen, with black background) and line is the progress bar, at first its width is 0% and when all images be loaded it must be 100% of width – Amine Akhouad Jul 26 '15 at 12:52
  • @JAAulde When i write alert($imgs[0].html()); it gives me an error " $imgs[0].html is not a function " ... what is the problem ? – Amine Akhouad Jul 26 '15 at 13:27

1 Answers1

0

I belive you want to show 100% wenn all images are loaded and do some action. First load event will not work if is atteched after image is already loaded.

I sugest to check for each img comlete and naturalWidth property every 100ms (with setInterval).

Loader = (function() {
var list, img_length, loaded, interval;
function _check_one(i) { o = list[i]; if (o.complete == true && o.naturalWidth > 0) { loaded++; delete list[i]; } };
function _procent(l, a) { console.log((100*loaded/img_length) + '%'); }
function _check_list() { for(var i in list) {_check_one(i)};_procent();_kill(); };
function _kill() { if(img_length <= loaded) clearInterval(interval); }
function _start() { loaded = 0; list = $('img'); img_length = list.length; 
if(img_length != loaded) interval = setInterval(_check_list, 100); }
return { start: _start }
})();

Now at end of the body or in $(document).ready(..) you need to call Loader.start();

Or put all images source (src) in data-src attribite, attach load events and copy data-scr to src attribite. In body all relevant images looks like this:

<img data-src="some url">...

In Script Tag:

$('img').on('load', function() {
// Your action.
}).each(function() { var img = $(this); img.attr('src', img.attr('data-src')); });
tkeram
  • 214
  • 1
  • 5