2017-07-19 21 views
1

我有一个网站,每页有几个小图像(约24个)。当我访问该页面时,我可以看到页面正在放大,文本显示在关联的图像之前等等。这对我来说不是问题,因为我知道网络设计为以这种方式工作,以便网站访问者可以看到某些内容在页面完全加载之前。问题是,今天,人们正在反对这个原则,以达到美丽,隐藏页面的部分,直到它被完全加载是常见的,如果不是必需的。我无法与之抗衡(如果我愿意的话)。当我向一些开发人员展示我的网站时,我可以看到他完全支持这种美观,赞成“旧原则”。用几个缩略图图像加载页面的技巧(laravel 5.3)

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

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

+0

你可能想用'html','css','javascript'来重新使用你的questoin。如果您使用的是Laravel和vuejs,则可以考虑使用vuejs的功能在加载后有条件地呈现图像。 – haakym

+0

查看adam wathan的方法也可用于停止页面在加载时放大图片:https://youtu.be/ktj_GR1LvFw?t=588 – haakym

回答

0

您可以使用jQuery和CSS页面完全加载之前显示加载动画

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

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

大公司的网站谁使用加载动画:https://club.ubisoft.com/

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