美文网首页前端资料
jS & jquery判断图片是否加载完毕

jS & jquery判断图片是否加载完毕

作者: 你我的微笑 | 来源:发表于2018-05-31 13:52 被阅读1次

    使用jquery的ready如下

    $(document).ready(function(){

      // 在这里写你的代码...});

    这是不行的,写下ready与window.onload的区别。

    jquery的ready只是dom的结构加载完毕,便视为加载完成。(缺点是图片没有加载完毕,宽高为0,程序出错)

    js的window.onload是指dom的生成和资源的加载,比如flash、图片完全加载出来后才执行onload。(缺点就是当某一张图片很大的时候,岂不阻止了其它js的正常执行)。

    这样用,判断单个图片可以:

    $('img').load(function(){

      // 加载完成    });

    缺点是每加载一张图片,回调函数就执行一次。只想全部加载完走一次,可以进行修改如下:

    va imgNum=$('img').length;

    $('img').load(function(){

        if(!--imgNum){

            // 加载完成    }

    });

    加载一张,就用图片总数去减一,减到0我就加载完毕。前提是没遇到IE。IE的图片总是从缓存文件里去拿,这就造成load方法根本就不执行,只有是新图片才会走load。

    var t_img; // 定时器

    var isLoad = true; // 控制变量

    // 判断图片加载状况,加载完成后回调

    isImgLoad(function(){

        // 加载完成

    });

    // 判断图片加载的函数

    function isImgLoad(callback){

        // 注意我的图片类名都是cover,因为我只需要处理cover。其它图片可以不管。

        // 查找所有封面图,迭代处理

        $('.cover').each(function(){

            // 找到为0就将isLoad设为false,并退出each

            if(this.height === 0){

                isLoad = false;

                return false;

            }

        });

        // 为true,没有发现为0的。加载完毕

        if(isLoad){

            clearTimeout(t_img); // 清除定时器

            // 回调函数

            callback();

        // 为false,因为找到了没有加载完成的图,将调用定时器递归

        }else{

            isLoad = true;

            t_img = setTimeout(function(){

                isImgLoad(callback); // 递归扫描

            },500); // 我这里设置的是500毫秒就扫描一次,可以自己调整

        }

    }

    相关文章

      网友评论

        本文标题:jS & jquery判断图片是否加载完毕

        本文链接:https://www.haomeiwen.com/subject/ugsqsftx.html