Javascript 加载带有多个缩略图的页面的技术(laravel 5.3)

Javascript 加载带有多个缩略图的页面的技术(laravel 5.3),javascript,css,json,ajax,http,Javascript,Css,Json,Ajax,Http,我有一个网站,每页有几个小图片(大约24个)。当我访问页面时,我可以看到页面被放大,文本显示在相关图像之前,等等。这对我来说不是问题,因为我知道web就是这样设计的,这样网站访问者可以在页面完全加载之前看到一些东西。问题是,今天,人们为了达到美观而反对这一原则,如果不需要的话,在页面完全加载之前隐藏页面的各个部分是很常见的。我无法与之抗争(如果可以,我愿意)。当我把我的网站展示给某个开发者时,我可以看到他完全将这种美的理念融入到了“旧原则”中 我从来没有真正尝试过设计一个有“智能图像加载”的页面

我有一个网站,每页有几个小图片(大约24个)。当我访问页面时,我可以看到页面被放大,文本显示在相关图像之前,等等。这对我来说不是问题,因为我知道web就是这样设计的,这样网站访问者可以在页面完全加载之前看到一些东西。问题是,今天,人们为了达到美观而反对这一原则,如果不需要的话,在页面完全加载之前隐藏页面的各个部分是很常见的。我无法与之抗争(如果可以,我愿意)。当我把我的网站展示给某个开发者时,我可以看到他完全将这种美的理念融入到了“旧原则”中

我从来没有真正尝试过设计一个有“智能图像加载”的页面,所以我不知道从哪里开始,这就是我来这里的原因。如果你能列出一些技术,插件等,可以用来执行渐进式图像加载的网页将是有益的


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

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

教程:

工作示例:

使用加载动画的大公司网站:


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

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

教程:

工作示例:

使用加载动画的大公司网站:


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

您可能希望使用
html
css
javascript
重新标记您的问题。如果你使用LaaVele和Vuejs,你可以考虑使用Vuujs的特性来在加载后有条件地呈现图像。adam wathan的方法也可以阻止页面在加载时停止对图片的放大:你可能想用QueX> HTML 重新标记你的Questoin,<代码> CSS,<代码> JavaScript < /Cord>。如果你使用LaaVele和Vuejs,你可以考虑使用Vuujs的特性来在加载后有条件地渲染图像。参见adam wathan的方法,它还用于阻止页面在加载时对图像进行放大: