Ao desenvolver a estação Soufang Home M, o efeito de exibição do álbum Soufang Home Decoration Rendering Requer o uso do plug-in PhotosWipe para exibir imagens.
Características:
1. A interface fornecida pela casa só pode obter uma foto de cada vez
2. O número de renderizações de decoração é ilimitado.
3. A julgar pelo uso do PhotosWipe, todas as fotos devem ser listadas antes que o PhotosWipe seja inicializado.
Instância = PhotosWipe.attach (window.document.QuerySelectorAll ('#Gallery A'), Opções);
A tag A é antes da inicialização do PhotosWipe e adicioná -la dinamicamente à galeria é inválida.
A solução atual é chamar a interface 10 vezes primeiro e listar 10 imagens. Depois de exibir essas 10 fotos, pule para a próxima página através do URL para exibir as 10 fotos no próximo grupo.
As vantagens desta solução são
1. Fácil de alcançar.
As desvantagens também são muito óbvias:
1. Toda vez que você pula para a próxima página, o usuário aguarda muito tempo. (10 vezes a interface é chamada + o tempo em que a imagem atual é baixada para o cliente + outra hora)
2. Enquanto a imagem está deslizando para a esquerda e para a direita, o salto repentino para a página no próximo ano também afeta a experiência do usuário.
Como otimizar o Photoswipe para não obter nenhuma página nem salto.
Qualquer pessoa que tenha usado o PhotosWipe deve conhecer o PhotosWipe.EventTypes.ondisplayImage. Este evento será acionado toda vez que uma imagem for exibida.
instance.addeventHandler (photoswipe.eventtypes.ondisplayImage, function (e) {// implemente algumas funções de código aqui.});Através da pesquisa, verificou -se que a coleta de objetos de imagem exibida pode ser acessada através do e.target.cache.images. Essa maneira de pensar é mais clara - "Primeiro defina um espaço reservado o suficiente e, em seguida, obtenha continuamente o endereço da figura um por um através do Ajax durante a tela deslizante da imagem e atribui a imagem correspondente na coleção de imagens E.Target.Cache.images".
O código a seguir é a implementação desse método de idéia (para a conveniência de explicar essa ideia, os detalhes adicionais foram omitidos)
<ul id = "Gallery" style = "Display: Nenhum;"> <!-Os 10 seguintes são as imagens obtidas desde o início até a interface-> <li> <a href = "ViewImage/zxb/2014_06/30/82/86/pic/00071123223/800x800.jpg"> href = "ViewImage/ZXB/2014_04/18/11/11/94/pic/000664552500/800x800.jpg"> </a> </li> <li> <a href = "ViewImage/ZXB/2014_06/14/69/65/pic/002962064200/800x800.jpg"> </a> </li> <li> <a href = "ViewImage/ZXB/2014_06/05/75/33/pic/005426525600/800x800.png"> </a> </li> <li> <a href = "ViewImage/ZXB/2014_02/12/13/15/pic/007331476000/800x800.jpg"> </a> </li> <li> <a href = "ViewImage/ZXB/2014_05/06/44/99/pic/004717983300/800x800.jpg"> </a> </li> <!-a seguir é o espaço espanhol a tag-> <li> <a href "" href = "Common_m/m_public/imagens/carregamento.gif"> </a> </li> <li> <a href = "Common_m/m_public/imagens/carregamento.gif"> </a> </li> <li> <a href = "Common_m/m_public/imagens/carreging.ft "g"> href = "Common_m/m_public/imagens/carregamento.gif"> </a> </li> <!-Você pode adicionar vários espaços reservados A, conforme necessário-> </ul>
Ao ouvir o evento PhotosWipe.EventTypes.ondisplayImage, modifique e.target.cache.images para corrigir o endereço da imagem do espaço reservado antes que a imagem seja baixada.
var aimGarriRindex = 0; var picSetIndex = 10; instance.adDeventHandler (photoswipe.eventTypes.ondisplayImage, function (e) {var whotSetimg = e.target.cache.images [picSetindex ++]; if (necessariamente) { $ .getjson ("./ index.php? c = jiaju & a = ajaxnextpicinfo & picid = {parâmetro picid}", function (data) {var url = dados [0] ["img"] nova imagem (). $ (necessitimg.metadata.item) na coleção de imagens de photoswipe.data ('comentário', ''); // defina outros conteúdos adicionais dessa maneira})}});index.php? c = jiaju & a = ajaxnextpicinfo & picid = {parâmetro picid} Retorna o conteúdo. De acordo com os diferentes picids, as informações relevantes de uma imagem são devolvidas todas as vezes.
A cópia de código é a seguinte: [{"img": http: //img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg}]
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.