Page Optimization: qTip with lazyloading?
So here is the problem: I'm trying to figuring out ways to optimize my
page. Right now I have 66 images of about 30kb each that load on page
load, but do not have to.
What I want is to use lazyload to load images that appear on hover inside
a qtip container ().
Here is my code:
don't mind first img tag with "data-seat", it's already loading on click
the problem is with the second img tag which is inside a qtip container
..
<td>
<a href="#">
<img data-size="size3"
data-seat="/images/custom/neosport/Black_Turtles_Sandy_Point.png"
data-swatch="/images/swatches/Hawaiian/data-swatches/solid/swatch-turtles-sandy-point_215.jpg"
src="/images/swatches/NeoSport/hawaiian-black_turtles_sandypoint.jpg"
border="0" width="70" height="25" alt="Black w/ Turtles Sandy Point
Inserts" title="Black w/ Turtles Sandy Point Inserts"
data-product="Hawaiian"/>
</a>
<div class="swatch-qtip-container">
<div class="swatch-qtip-name neo">Black w/ Turtles Sandy Point</div>
<div class="swatch-qtip-image neo">
<img src="/images/custom/neosport/Black_Turtles_Sandy_Point.jpg"
alt="" />
</div>
</div>
</td>
What I've tried is this:
<td>
<a href="#">
<img data-size="size3"
data-seat="/images/custom/neosport/Black_Turtles_Sandy_Point.png"
data-swatch="/images/swatches/Hawaiian/data-swatches/solid/swatch-turtles-sandy-point_215.jpg"
src="/images/swatches/NeoSport/hawaiian-black_turtles_sandypoint.jpg"
border="0" width="70" height="25" alt="Black w/ Turtles Sandy Point
Inserts" title="Black w/ Turtles Sandy Point Inserts"
data-product="Hawaiian"/>
</a>
<div class="swatch-qtip-container">
<div class="swatch-qtip-name neo">Black w/ Turtles Sandy Point</div>
<div class="swatch-qtip-image neo">
<img class="lazy"
src="/images/custom/neosport/Black_Turtles_Sandy_Point.jpg" alt=""
/>
</div>
</div>
</td>
<script>
$("img.lazy").lazyload();
</script>
-OR-
<script>
$("img.lazy").lazyload({
container: $(".swatch-qtip-container")
});
</script>
It does not work. Any idea how to stack these 2 plugins? Any other bright
suggestions on how to optimize it, besides lowering image guilty(already
did that)?
No comments:
Post a Comment