HTML图片顺序加载

2. JavaScript 中图片顺序加载，防止页面阻塞

• 浏览器一般只能同时存在4-8个连接（chrome6个),为了使得图片和页面渲染同时进行，需要保证图片加载只有一个连接使用，即顺序加载：

 

JavaScript 代码

$(function(){
    //获取页面所有图片
    var images = document.images;
    //图片异步加载
    preload(images,0);
});

//图片异步加载
function preload(images, index) {
    index = index || 0;
    if (images && images.length > index) {
        var img = images[index];
        //图片加载完成后回到函数中开始加载下一张图片
        img.onload = function() {
            preload(images, index + 1);
        };
        var src = "download?id="+images[index].id+"&isThumball=false";
        img.src = src;
    }
}

HTML 代码

 

<img src="" id="${drawingImg.id}" alt="${drawingImg.imageName }"></div>

 

1. 图片下载方法DEMO:

@RequestMapping("download")
 public void downFile(@RequestParam("id") String id, HttpServletResponse response) throws Exception {
    List<ImageVO> list = imageService.getImageInfoBySrctypeAndDataId(SrcTypeEnum.MATERIAL.getValue(), id);
    OutputStream out = new ByteArrayOutputStream();
    String imageId = "";
    String fileName = String.valueOf(new Date().getTime()) + ".jpg";
    if (list.size() > 0) {
        ImageVO image = list.get(0);
        imageId = image.getImageId();
        image.getName();
        fileName = image.getName();
    }
    out = imageService.downloadImage(imageId, CompressLevel.STANDARD, true);
    response.setContentType("application/octet-stream");

    // 设置下载文件名
    response.addHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\"");
    OutputStream outstrm = response.getOutputStream();
    outstrm.write(((ByteArrayOutputStream) out).toByteArray());
    outstrm.flush();
    out.close();
    outstrm.close();
}