js imagens efeito de carga (carga retardada + cascata carga)

A principal tarefa dos efeitos das duas imagens carregado
um é encontrado mais imagens de página quando carregado com prompt de leitura do efeito (a fim de verificar o carregamento correto, configurar um segundo intervalo de carga)
Outra é baseado no deslizamento posição de pré-carga do bloco para uma imagem, num caso em que o utilizador não percebe, para alcançar o efeito do carregamento da cascata

Um atraso no carregamento

A idéia principal:

img HTML tag, a presença do endereço correto do atributo data-src, todas as imagens para uma carga de imagem em movimento círculo é fornecido como um fundo
js sequencialmente lê cada IMG, o endereço de substituição dados-src na src e o fundo removido
Cada imagem é carregado com êxito, a porcentagem da barra de progresso muda de acordo.
Se a carga não for bem sucedida, você será solicitado a carregar a imagem errada.

estrutura HTML é muito simples, é uma div.picList envolveu todos img, e depois adicionar uma barra de progresso simples div # loadBar

<body>
    <div class="picList">
        <img class="lazy" data-src="pic/compressed/picList1.jg">
        <img class="lazy" data-src="pic/compressed/picList2.jpg">
        <img class="lazy" data-src="pic/compressed/picList3.jpg">
        <img class="lazy" data-src="pic/compressed/picList4.jpg">
        <img class="lazy" data-src="pic/compressed/picList5.jpg">
        <img class="lazy" data-src="pic/compressed/picList6.jpg">
        <img class="lazy" data-src="pic/compressed/picList7.jpg">
        <img class="lazy" data-src="pic/compressed/picList8.jpg">
        <img class="lazy" data-src="pic/compressed/picList9.jpg">
        <img class="lazy" data-src="pic/compressed/picList10.jpg">
    </div>

    <div id="loadBar">
        <div id="loadBarMask"></div>
    </div>
</body>

css (uso SCSS, irá adicionar automaticamente o prefixo é compatível com uma variedade de tempo de compilação)

.picList{
    img{
        width: 100px;
        height: 100px;
        position: relative;

        /*加载失败时显示灰底文字*/
        &:after{
            content: "( ⊙ o ⊙ )加载失败";
            font-size: 6px;
            font-family: FontAwesome;
            color: rgb(100, 100, 100);
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: #ddd;
        }
    }
}

.lazy{
    background: url(../pic/loading.gif) center no-repeat;
    border: 1px solid black;
}

#loadBar{
    width: 200px;
    height: 15px;
    background: linear-gradient(90deg,#187103,#81b50b,#187103);
    border: 10px solid white;

    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -100px;

    #loadBarMask{
        width: 70%;//这个数值显示没有加载成功的图片
        height: 100%;
        background-color: beige;
        position: absolute;
        right: 0;
    }
}

css dentro existem duas ressalvas:

Um duplex é o texto que aparece quando você carrega uma imagem errada sobre o img após pseudo-classes, quando a imagem não carrega e remover o fundo da imagem gif depois, ele irá exibir o conteúdo e estilo desta seção.
Um estilo de barra de progresso. Adicione uma forma muito simples, principalmente uma camada com uma camada de gradiente de branco e verde empilhados em conjunto. Verde indica Loaded, branco indica não carregado. Quando apresentado, o controlo directo da largura da camada de branco para que.

js porção (execução directa loadPicPerSecond () puder)

var lazyPic = $('img.lazy');
var loadBarMask = $('#loadBarMask');
var picList = $('.picList');

var activePic = 0;
var totalPic = lazyPic.length;

/*每秒加载一张图片*/

function loadPicPerSecond(){

    lazyPic.each(function(index){

        var self = $(this);

        //console.log(self[0].complete);
        /*img标签已经事先写在html中，所以此时的complete状态全部都是true*/

        setTimeout(function(){

            src[index] = self.attr('data-src');
            self.attr('src',src[index]);
            self.removeClass('lazy');

            //图片获得正确src地址之后，可以执行下面的onload操作
            self[0].onload = function(){

                //加载读条loadBar动画
                countPic();
            }

            //图片获得的src地址不正确时，执行下面的onerror操作
            self[0].onerror = function(){
                /*this.style.background = 'url(pic/compressed/picList18.jpg) center no-repeat';*/
                countPic();
            }

        },1000*index);

    })

}

/*根据onload的执行情况来计算当前的图片加载进度.每onload一次，activePic就增加1*/

function countPic(){

    activePic++;

    var leftPic = totalPic - activePic;
    var percentPic = Math.ceil(leftPic/totalPic*100);//没有加载的图片百分比，和loadBarMask的宽度占比配合

    console.log("已加载"+(100-percentPic)+"%");

    loadBarMask.css("width",percentPic+"%");

    if(percentPic==0){
        $('#loadBar').hide();
    }
}

São duas cachoeiras fluxo de carga

A idéia principal:

Ouvindo caso a janela de rolagem, quando o último é sobre a foto foi carregado para a janela e começou a carregar a imagem abaixo.
Depois que a imagem é assumido que todos os endereços já existe um json dados, cada endereço de leitura da imagem 10, o qual é carregado, é inserido na extremidade de uma cascata existente.
E assim por diante, até que você tenha carregado todas as imagens.

HTML e parte da frente do mesmo, mas o endereço de gravação normal de src.
css exatamente o mesmo.

js parte

var lazyPic = $('img.lazy');
var loadBarMask = $('#loadBarMask');
var picList = $('.picList');

var scrollTop,
    clientHeight,
    scrollHeight;

var threshold = 200; //最后一张图片距离窗口200px的时候开始加载图片

var src = [];

var activePic = 0;
var totalPic = lazyPic.length;

//待加载的图片数据
var dirtSrc = "pic/compressed/picList";
var picData = {imgSrc:[
    dirtSrc + "20.jpg",
    dirtSrc + "21.jpg",
    dirtSrc + "22.jpg",
    dirtSrc + "23.jpg",
    dirtSrc + "24.jpg",
    dirtSrc + "25.jpg",
    dirtSrc + "26.jpg",
    dirtSrc + "27.jpg",
    dirtSrc + "28.jpg",
    dirtSrc + "29.jpg",
    dirtSrc + "30.jpg",
    dirtSrc + "31.jpg",
    dirtSrc + "32.jpg",
    dirtSrc + "33.jpg",
    dirtSrc + "34.jpg",
    dirtSrc + "35.jpg",
    dirtSrc + "36.jpg",
    dirtSrc + "37.jpg",
    dirtSrc + "38.jpg",
    dirtSrc + "39.jpg",
    dirtSrc + "40.jpg",
    dirtSrc + "41.jpg",
    dirtSrc + "42.jpg",
    dirtSrc + "43.jpg",
    dirtSrc + "44.jpg",
    dirtSrc + "45.jpg",
    dirtSrc + "46.jpg",
    dirtSrc + "47.jpg",
    dirtSrc + "48.jpg",
    dirtSrc + "49.jpg",
]};

//加载次数计数器
var scrollIndex = 0;

$(function(){

    /*监听窗口滚动情况*/
    $(window).on('scroll',function(){

        scrollTop = $(window).scrollTop();//$(window).scrollTop()==document.body.scrollTop
        clientHeight = $(window).height();
        scrollHeight = picList.last().height();//picList.last()[0].clientHeight

        /*目标与窗口的距离达到阈值时开始加载*/
        if(scrollHeight-clientHeight-scrollTop < threshold){
            scrollPic(10);
        }
    })
})

/*根据滚动程度加载图片，每次加载perAmount张*/

function scrollPic(perAmount = 10){

    var totalAmount = perAmount * (scrollIndex+1);

     //考虑到最后一次加载的时候，剩余的图片数量有可能达不到限定的每次加载的数量，这时候需要更改totalAmount的值
    if(totalAmount>picData.imgSrc.length){
        totalAmount = picData.imgSrc.length;
    }
    for(scrollIndex;scrollIndex<totalAmount;scrollIndex++){
        var oimg = new Image();
        oimg.src = picData.imgSrc[scrollIndex];
        picList.append(oimg);
    }

}

Compare ansioso para captura é scrollTop, o valor da altura do objeto que vários valores, lembre-se sempre de forma clara, portanto, de acordo com js e jQuery são escritos em, o futuro pode ser usado diretamente. Depois que o valor da relação de obter, desde que a condição é desencadeada pode ser carregado.

Três · problemas de compatibilidade Postscript

obter Runtime sob IE8, encontrado atrás a função de morte img.onload não realizados, IE8 retardado para não ser concluída img.onload = function () {} código primário por isso?
Em seguida, foi para verificar as informações, descobriram que, embora IE8 idiota, mas ainda não ao incurável mentalmente retardado.
onload é chamado, mas antes do src atribuição deve ser colocado.

Em termos simples, é a primeira dizer ao navegador como lidar com a imagem foi carregada, e depois deixá-lo ir imagem Load. tampão evitar o carregamento porque a velocidade é muito rápido, não há como dizer quando o carregamento acabado de como fazer isso ele tem de carregamento acabado. E quando onload executar outros navegadores são lidos do buffer para a imagem.

Um atraso no carregamento

São duas cachoeiras fluxo de carga

Três · problemas de compatibilidade Postscript

Acho que você gosta