HTML 图片顺序加载

本贴最后更新于 2464 天前,其中的信息可能已经事过景迁

JavaScript 中图片顺序加载,防止页面阻塞

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

    $(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>

图片下载方法 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();
}
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 744 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...