I'm using Nuxt for my web app and I have a list of items with images.
For image lazy loading I'm using component https://bootstrap-vue.js.org/docs/components/image and it is working fine.
Example of my usage:
<div class="item">
<b-img-lazy :src="imageUrl" />
</div>
The issue appearing when I'm doing filtering of my items, because views are reusing and when I filter, (let's say it was 10 and now only 1), item will have image of another item until it's image will be loaded.
So, basically, instead of seeing empty image for new item I can see image of item which had same position previously.
Is there way to reset old image?
v-bind:key might be your friend here. Binding a key will force a full re-render of the component instead of just patching what changed about the component.
<div class="item">
<b-img-lazy :key="imageUrl" :src="imageUrl" />
</div>
Docs here: https://v2.vuejs.org/v2/guide/list.html#Maintaining-State
Related
I'm working with a third-party code and I'm quite limited in terms of filtering a list of elements.
Each of these elements has this structure:
<div class="item-preview">
<div class="item-info">
<div class="tag">
<svg class="tag-public"></svg>
</div>
</div>
</div>
The only thing that changes is the svg class, so it's whether tag-public or tag-private. Depending on the user type that's checking the content, I'd like to hide it when it's tag-private. I've tried this:
$('.tag-private').closest('.item-preview').hide();
And this:
$('.tag-private').parents('.item-preview').hide();
But any of them works. The code uses React and the items are brought by JSON/AJAX, so I guess the problem is related to trying to modify the page once is loaded...
Any thoughts on how to make my JS "override" the original code? Thanks a ton.
I am rendering some div and I have like to not show a div when an image is not there.
An example image is here: https://clips-media-assets2.twitch.tv/AT-cm%7C891283246-preview-480x272.jpg
I am thinking of something like this:
<div v-show="twItem.imageurl">{{twItem.title}}</div>
But it doesn't work. Any help would be appreciated.
This task is not primitive.
No matter if you use v-if or v-show, both compare the same thing, but the result is different. v-if="false" will not render the element at all, whilst v-show="false" will render it, but hidden. (display: none;)
The problem here is, that you simply check if the twItem.imageurl is set and NOT if the image was loaded.
What you might be able to do is using #load:
<template>
<div v-if="twItem.loaded">{{ twItem.title }}</div>
<image :src="twItem.imageurl" #load="twItem.loaded = true">
</template>
See here for a more detailed explanation: https://renatello.com/vue-js-image-loaded/
Use v-if instead of v-show.
<div v-if="twItem.imageurl">{{ twItem.title }}</div>
i everyone,
i have a problem that has already happened to me in another case, but I present this hoping that we can solve it:
The jquery (called on "rendered") works well when it is not generated by eachloop ... why not work in generated html?
i click on an image generated by eachloop and nothing happens
gallery.html
{{#each gallery}}
<div class="superbox-list">
<img src="images/superbox/superbox-thumb-1.jpg" data-img="images/superbox/superbox-full-1.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Miller Cine" class="superbox-img">
</div>
{{/each}}
<div class="superbox-list">
<img src="images/superbox/superbox-thumb-1.jpg" data-img="images/superbox/superbox-full-1.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Miller Cine" class="superbox-img">
</div>
<div class="superbox-list">
<img src="images/superbox/superbox-thumb-2.jpg" data-img="images/superbox/superbox-full-2.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Bridge of Edgen" class="superbox-img">
</div>
gallery.js
Template.gallery.rendered = function(){
$('.superbox').SuperBox();
}
Template.gallery.helpers({
gallery: function(){
return Gallery.find();
}
});
Example,
Image 1 Image 2
best regards,
ty
EDIT:
I used this way and it worked, although not find the method defer in meteor docs!
_.defer(function () {
$('.superbox').SuperBox();
});
I used this way and it worked, although not find the method defer in meteor docs!
_.defer(function () {
$('.superbox').SuperBox();
});
Your issue is probably that the data isn't there when your gallery is first rendered. You can fix that by waiting on the subscription using iron-router's waitOn (if you're using iron-router) but that only solves the problem of the documents that are in the database on page load. Any new documents wouldn't be "superBox'd" either. So the way around that is to have a specific template for each Gallery row.
Your each becomes:
{{#each gallery}}
{{> galley_row }}
{{/each}}
You add a new template:
<template name="gallery_row">
<div class="superbox-list">
<img src="images/superbox/superbox-thumb-1.jpg" data-img="images/superbox/superbox-full-1.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Miller Cine" class="superbox-img">
</div>
</template>
Then whenever your new template is rendered (each iteration of the #each loop):
Template.galley_row.rendered = function () {
$('.superbox').SuperBox();
});
I am rendering markup which contains wrapping divs every 5 items
<div class="snap" ng-repeat="itemsChunk in items">
<a class="timeline-item" href="#" ng-repeat="item in casestudyChunk">
<img class="img-responsive" src="{{item.ImageUrl}}" />
</a>
</div>
Where item is an array split into chunks. Split array into chunks
Since the markup needs completely re-rendering after the datasource has changed, I can't use the normal animate hooks. I instead want to fade out all the items before the change, and fade the newly rendered markup in.
How can I do this with Angular?
Update
An option I've got is to apply a fadeOut class to the elements, listen for the complete event and then bind afterwards. This doesn't feel like the proper angular way of doing it though. Is there a better way?
Also I am lazy loading images, so need to run a function to trigger this after binding. I have seen this done with a timeout, again if there is a better way I am interested.
You can try use animate.css and add to your
<div class="snap" ng-repeat="itemsChunk in items">
fadeIn css-class
<div class="snap animated fadeIn" ng-repeat="itemsChunk in items">
there you can find simmilar solution
I'm following this simple demo tutorial here:
http://jquerytools.org/demos/scrollable/index.html
Well basically, I'm following the tutorial above. The problem with that demo is that it loads all the images at one time affecting performance greatly. I want it so that it only loads a set of images every time you click the arrows. So basically, once you go to the page, it loads the first set of images first. Then, once you click one of the arrows, it loads the next set of images. This is so that the page has a much shorter load time. Is there anyway to do that with ajax or maybe jQuery load? I want it to be something like the link below but using the jquery tools scrollable plugin:
http://sorgalla.com/projects/jcarousel/examples/dynamic_ajax_php.html
It'd be helpful if you provided some of your code. However, from the documentation shown, your image sets should be in separate divs to achieve what you want
//one set
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
</div>
///Next set, revealed on click
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
</div>