在jQuery背景变化闪烁 [英] Flicker on jQuery Background Change
问题描述
我为我目前的程式码建立了一个jsfiddle。 http://jsfiddle.net/gL5sB/38/
我试图改变主题背景CSS滚动事件。当背景更改时，它更新时出现闪烁，并且加载了新的图像。有时它似乎顺利，然后似乎变得更糟。很奇怪。好奇，如果有人知道如何优化？
我预加载图像。不知道为什么闪烁。任何想法？
$（document）.ready（function（）{
switchImage（）;
}）;
$（window）.scroll（function（）{
switchImage（）;
}）;
var pics = []; // CREATE PICS ARRAY
//使用图像对象在存储器中设置PICS阵列的PRELOAD函数
function preload（）{
for（i = 0; i
pics [i] .src = arguments [i];
// alert（preload+ arguments [i]）;
}
}
preload（
'bgImage / 100.jpg'，
'bgImage / 101.jpg'，
'bgImage / 102.jpg '，
'bgImage / 105.jpg'，
'bgImage / 103.jpg'，
'bgImage / 104.jpg'
'bgImage / 107.jpg'，
'bgImage / 108.jpg'，
'bgImage / 109.jpg'，
'bgImage / 110.jpg'，
'bgImage / 111.jpg'，
'bgImage / 112.jpg'，
'bgImage / 113.jpg'
）;
function switchImage（）{
var s = $（window）.scrollTop（）/ 10;
var index = Math.floor（s / 5）;
$（'body'）。css（'background-image'，'url（'+ pics [index] .src +'）'）;
}
Chrome可以。我可以看到IE中的闪烁。一个解决方案是在这篇文章的底部。
我怀疑视频版本将压缩和加载比所有的图像，但如@Allendar的建议将是最高的传输效率。我会建议使用canvas或SVG。
使用图像的另一种方法是将图像或图标字体放置在显示器上，并进行绝对定位，他们在脚本中打开或关闭。但这是一个非常复杂的解决方案。
我认为最简单和最快的方法来解决今天的问题，只是调整你有的解决方案。正如其他人建议的，多图像方法不会是超级有效的，如果你要采取这个路由，至少确保您设置缓存头在您的Web服务器上无限缓存;
Cache-Control：public;
到期日：星期一，2035年12月31日12:00:00 GMT
闪烁问题只是IE中的渲染引擎中的错误/低效，所以这里是一个使用不同方法的解决方法。
基本上伸展一个绝对定位的 DIV ，而不是使用 body 本身事实上，在这种情况下，我们使用多个 DIV ，每个图像一个，并将它们叠加在一起。您可以在脚本中创建这些节点。
其次，为您的内容添加另一个 DIV 在身体以及;
< body&
< div id =b100class =backgroundstyle =background-image：url（'http://ingodwetrustthemovie.com/bgImage/100.jpg'）>< / div&
<！ - rest omitted - >
< div id =b113class =backgroundstyle =background-image：url（'http://ingodwetrustthemovie.com/bgImage/113.jpg'）>< / div&
< div id =content>
< div id =test> test div< / div>
这里是一些文本
< / div>
< / body>
一次只显示一个并隐藏其余部分;
function switchImage（）{
var s = $（window）.scrollTop（）/ 10;
var index = Math.floor（s / 5）;
$（'。background'）。hide（）;
$（'。background'）。eq（index）.show（）;
}
我怀疑twiddling css显示选项比更改
这里是 Fiddle
当然，您可能仍需要优化代码，以允许首先显示第一个加载的图片，而不是纯背景，但是我认为这演示了修复的原则。
您也可以考虑制作一个非常大的CSS Sprite，通过将图像捆绑到一个巨大的条带，然后使用 background-position 。这可能会工作在 body 标记本身。当然，这意味着下载一个巨大的文件，然后才能显示任何图像，但有两个优点：
- 使用相同的缓存指令，只有一个HTTP / GET / 302周期，而不是13次，一旦你获取了 p> SVG元素与DOM非常相似。如果你可以得到你的内容作为SVG交付，你可以钻取图形，找到元素，给他们的ID等，并操作他们很像你会像任何其他DOM元素;
- One image (especially with such similarity) will compress way better than each individual one in isolation.
- Using the same caching directives, that's only one HTTP/GET/302 cycle instead of 13 once you've fetched the image the first time, so your page may load faster still.
< svg xmlns =http://www.w3.org/2000/svgversion =1.1>
< ellipse id =e1cy =420cx =200rx =420ry =30style =fill：3f5566/>
< ellipse id =e2cy =420cx =170rx =390ry =20style =fill：4f5566/>
< ellipse id =e3cy =420cx =145rx =370ry =15style =fill：5f5566/>
< ellipse id =e4cy =420cx =100rx =370ry =20style =fill：6f5566/&
< ellipse id =e5cy =420cx =45rx =300ry =15style =fill：8f5566/>
< / svg>
这是另一个 理想情况下，假设他们在图层中生成了该图形，尝试让您的设计师为您提供一个SVG，其中的图层将转换为组。 Adobe Illustrator可以执行此操作。 然后，您可以根据需要轻松关闭图层/组，以创建动画效果。 I created a jsfiddle for my current code. http://jsfiddle.net/gL5sB/38/ I am trying to change the body background css on scroll event. When the background changes it appears to flicker when the css is updated and new image is loaded. At times it seems smooth and then it seems to get worse. Very strange. Curious if anyone knows how to optimize? I am preloading the images. Not sure why the flicker. Any ideas?
Chrome is OK. I can see the flicker in IE. A Solution for that is at the bottom of this post. I suspect A video version would compress and load faster than all the images, but as suggested by @Allendar drawing it would be the most transmission efficient. I would suggest canvas or SVG. Another way using images along would be to have individual components as either images or icon fonts placed on the display with absolute positioning and then just turning them on or off in script. But that's a very complex solution. I think the simplest and fastest method for you to solve the issue today though would be to just tweak the solution you have. As other people have suggested, the multiple images approach won't be super efficient and if you're going to take that route at least make sure you set the caching headers on your web server to cache indefinitely; OK, so the flicker problem is just a bug/inefficiency in the rendering engine in IE, so here's a workaround that uses a different approach. Basically stretch an absolutely positioned Secondly, add another The simply show one at a time and hide the rest; I had a suspicion that twiddling the css display option would be less flickery than changing the src attribute and it seems to do the trick. Of course you may still need to optimise the code to allow for the first loaded image to be shown first instead of the plain background, but I think this demonstrates the principle of a fix. You could also consider making a very large CSS Sprite, by bundling the images into one huge strip and then using
SVG elements work much like the DOM. If you can get your content delivered as an SVG you can drill into the graphic, locate the elements, give them IDs etc, and manipulate them much like you would any other DOM element; Here's another fiddle that hides/unhides SVG elements based on a scroll. Ideally, assuming they've generated that graphic in 'layers', try and have your designers deliver you an SVG where the layers are converted into groups. Adobe Illustrator can do that for instance. Then you can easily turn off the layers/groups as necessary to create the animated effect. 这篇关于在jQuery背景变化闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$(document).ready(function () {
switchImage();
});
$(window).scroll(function () {
switchImage();
});
var pics = []; // CREATE PICS ARRAY
//PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT
function preload() {
for (i = 0; i < arguments.length; i++) {
pics[i] = new Image();
pics[i].src = arguments[i];
//alert("preload " + arguments[i]);
}
}
preload(
'bgImage/100.jpg',
'bgImage/101.jpg',
'bgImage/102.jpg',
'bgImage/103.jpg',
'bgImage/104.jpg',
'bgImage/105.jpg',
'bgImage/106.jpg',
'bgImage/107.jpg',
'bgImage/108.jpg',
'bgImage/109.jpg',
'bgImage/110.jpg',
'bgImage/111.jpg',
'bgImage/112.jpg',
'bgImage/113.jpg'
);
function switchImage() {
var s = $(window).scrollTop()/10;
var index = Math.floor(s / 5);
$('body').css('background-image', 'url(' + pics[index].src + ')');
}
Cache-Control: public;
Expires: Mon, 31 Dec 2035 12:00:00 GMT
DIV over the body, instead of using the body itself. In fact, in this case we use multiple DIVs, one for each image and overlay them on top of one another. You could create these nodes in script as well.DIV for your content, and overlay that over the body as well;<body>
<div id="b100" class="background" style="background-image:url('http://ingodwetrustthemovie.com/bgImage/100.jpg')"></div>
<!-- rest omitted -->
<div id="b113" class="background" style="background-image:url('http://ingodwetrustthemovie.com/bgImage/113.jpg')"></div>
<div id="content">
<div id="test">test div</div>
here is some text
</div>
</body>
function switchImage() {
var s = $(window).scrollTop()/10;
var index = Math.floor(s / 5);
$('.background').hide();
$('.background').eq(index).show();
}
Here's the Fiddle
background-position. That would probably work on the body tag itself then. Of course this would mean downloading a huge file before you can display any images at all, but there are two advantages;
SVG
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse id="e1" cy="420" cx="200" rx="420" ry="30" style="fill:3f5566" />
<ellipse id="e2" cy="420" cx="170" rx="390" ry="20" style="fill:4f5566" />
<ellipse id="e3" cy="420" cx="145" rx="370" ry="15" style="fill:5f5566" />
<ellipse id="e4" cy="420" cx="100" rx="370" ry="20" style="fill:6f5566" />
<ellipse id="e5" cy="420" cx="45" rx="300" ry="15" style="fill:8f5566" />
</svg>
