I am using a JavaScript library to arrange few images on the webpage. The following browsers:
我正在使用JavaScript库在网页上排列少量图像。以下浏览器:
- Firefox
- IE 11
- Microsoft edge
render the page as it was planned, the problem occurs with Chrome browser. It messes up the complete layout.
按照计划呈现页面,Chrome浏览器出现问题。它弄乱了完整的布局。
The above browsers don't load any content unless all the images have been downloaded, until then it shows a blank white screen, and all of a sudden it will show all the content rendered perfectly. And in case of Chrome, the browser displays content on the go, as in you can see the images appearing in a scanline fashion.
除非所有图像都已下载,否则上述浏览器不会加载任何内容,直到它显示一个空白的白色屏幕,突然它会显示所有呈现的内容完美。对于Chrome,浏览器会随时随地显示内容,就像您可以看到以扫描线方式显示的图像一样。
I've tried calling the function that arranges these images inside:
我试过调用里面安排这些图像的函数:
$(window).load(function() {})
and it didn't fix the issue, I tried calling this in the <head></head> and also just before closing </body>, that didn't fix it either. Is this a Chrome related issue?
并且它没有解决问题,我尝试在 中调用它,也就是在关闭 之前调用它,这也没有解决它。这是与Chrome相关的问题吗?
What should be the correct point in time where the function should be called?
什么应该是应该调用函数的正确时间点?
3 个解决方案
#1
1
There is a nice library on the web with a comprehensive name imagesLoaded designed to fix your issue! It is supposed to work cross-browser of course, so no differences in behaviour in Chrome or other browsers.
网上有一个很好的图书馆,全面的名称imagesLoaded旨在解决您的问题!当然,它应该在跨浏览器中工作,因此在Chrome或其他浏览器中的行为没有差异。
With its help, you can run your code at the moment when all images loaded in specific DOM element or elements controlled by jQuery selector. Like:
在它的帮助下,您可以在所有图像加载到特定DOM元素或由jQuery选择器控制的元素时运行您的代码。喜欢:
$('body').imagesLoaded( function() {
// images have loaded
});
There are also .done, .fail, .progress callbacks supported if you need, so check the docs.
如果需要,还支持.done,.fail,.progress回调,因此请查看文档。
#2
1
In some cases you have to wait until the image loads to get a parameter not specified in the <img> tag, such as height for example. Then you may use $(window).load
在某些情况下,您必须等到图像加载才能获得
标记中未指定的参数,例如高度。然后你可以使用$(window).load
In other cases, for example, adding some classes to the images, you can do it before the image load.
在其他情况下,例如,向图像添加一些类,您可以在图像加载之前执行此操作。
If you want to load the images after the page loads completely or when the user really scroll and see each image, Lazy Load is a good plugin and it support callbacks.
如果您想在页面完全加载后或者当用户真正滚动并查看每个图像时加载图像,Lazy Load是一个很好的插件,它支持回调。
#3
0
Images should load First as hidden, Then your script should run like
图像应首先加载为隐藏,然后您的脚本应该像
$(document).ready(function(){
// here do the scripting may be showing them one by one
});
#1
1
There is a nice library on the web with a comprehensive name imagesLoaded designed to fix your issue! It is supposed to work cross-browser of course, so no differences in behaviour in Chrome or other browsers.
网上有一个很好的图书馆,全面的名称imagesLoaded旨在解决您的问题!当然,它应该在跨浏览器中工作,因此在Chrome或其他浏览器中的行为没有差异。
With its help, you can run your code at the moment when all images loaded in specific DOM element or elements controlled by jQuery selector. Like:
在它的帮助下,您可以在所有图像加载到特定DOM元素或由jQuery选择器控制的元素时运行您的代码。喜欢:
$('body').imagesLoaded( function() {
// images have loaded
});
There are also .done, .fail, .progress callbacks supported if you need, so check the docs.
如果需要,还支持.done,.fail,.progress回调,因此请查看文档。
#2
1
In some cases you have to wait until the image loads to get a parameter not specified in the <img> tag, such as height for example. Then you may use $(window).load
在某些情况下,您必须等到图像加载才能获得标记中未指定的参数,例如高度。然后你可以使用$(window).load
In other cases, for example, adding some classes to the images, you can do it before the image load.
在其他情况下,例如,向图像添加一些类,您可以在图像加载之前执行此操作。
If you want to load the images after the page loads completely or when the user really scroll and see each image, Lazy Load is a good plugin and it support callbacks.
如果您想在页面完全加载后或者当用户真正滚动并查看每个图像时加载图像,Lazy Load是一个很好的插件,它支持回调。
#3
0
Images should load First as hidden, Then your script should run like
图像应首先加载为隐藏,然后您的脚本应该像
$(document).ready(function(){
// here do the scripting may be showing them one by one
});