使用多个缩略图加载页面的技巧(laravel 5.3)

时间:2017-07-19 14:21:47

标签: javascript css json ajax http

我的网站上有一个部分,每页有几张小图片(约24张)。当我访问该页面时,我可以看到页面被放大,文本显示在相关图像之前等等。这对我来说不是问题,因为我知道网页的设计是这样工作的,所以网站访问者可以在页面完全加载之前看到一些内容。问题是,今天,人们正在反对这个原则来实现美感,隐藏页面的部分直到完全加载是常见的,如果不需要的话。我不能打这个(如果我能,我会)。当我向一些开发者展示我的网站时,我可以看到他完全诠释了这种美丽的观念,支持旧的原则"。

我从未真正尝试设计一个具有"智能图像加载的页面"所以我不知道从哪里开始,这就是我在这里的原因。如果您可以列出一些技术,可以用来在页面中执行渐进式图像加载的插件等将会很有帮助。

只需返回包含所有图像的视图即可加载我的页面。我假设为了实现智能图像加载,我必须通过从控制器返回json来获取图像和关联文本,这是正确的吗?如果是这样,我将不得不对我的系统进行重大改变。我简要地看了一种技术,它将页面上的所有图像设置为动画gif图像,然后当从服务器获取数据时(使用ajax / json)它替换图像的src属性,这是一种很好的技术。再说一次,最好的技术是什么?

1 个答案:

答案 0 :(得分:0)

您可以使用jquery和css在页面完全加载之前显示加载动画

教程:http://smallenvelop.com/display-loading-icon-page-loads-completely/

工作示例:http://smallenvelop.com/demo/simple-pre-loader/

Big Company的网站使用加载动画:https://club.ubisoft.com/

只是一个警告:使用这种技术的网站看起来会变慢,用户甚至可能在页面加载之前离开网站,我个人认为首先显示文本的默认行为仍然是最好的。