前端优化之图片预加载和延迟加载

预加载  :

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可享受到极快的加载速度。

比如预加载这三张图片:



函数声明:
function preloadimg(array){
    var newimg=[];
    for(var i=0;i

执行函数:

preloadimg(['1.jpg','2.jpg','3.jpg']);

图片延迟加载:

  1、利用基于jQuery的lazyload插件:

     

引用jQuery和lazyload文件


     

图片加入样式lazy;路径引用使用data-original; 



       

js初始化插件并设置图片出现方式:


2、利用js或jQuery:

  因为要延迟加载,所以html结构中img标签的src属性去掉,把路径付给自定义另外一个属性d-src。

html结构:


js:循环遍历每一个img,判断当图片的一半在可视区域时,加载图片;


                    
                    

你可能感兴趣的:(前端优化之图片预加载和延迟加载)